안녕하세요👋 REED Design입니다 :)
이번 포스팅 주제는 #2 팀 블로그 홈에 이어 #3 포스트 상세페이지 리뉴얼에 대한 작업 기록입니다. 포스트 상세페이지는 현재 이 글을 보고있는 페이지로, 팀 블로그 홈에서 포스트 썸네일을 클릭 했을 때 나타나는 페이지 입니다.
그럼 #3 포스트 상세페이지 작업기록 시작해보겠습니다!
포스트 상세페이지 리뉴얼 배경
팀 블로그 사이트 내에서 저번 포스트 내용과 같이 [팀 블로그 홈]은 리뉴얼이 완료되었습니다. 이제 팀 블로그홈과 연결된 [포스트 상세 페이지]를 리뉴얼 할 차례입니다. 포스트 상세페이지의 우선 과제는 리뉴얼 된 팀 블로그 홈의 디자인시스템과 톤앤매너를 통일하는 작업이었습니다.
기존 페이지 리뉴얼 방향성
리뉴얼 이전의 포스트 상세 페이지는 해당 포스트가 팀 블로그에서 발행되었다는 정보를 명확히 보여주지 않았습니다. 따라서 팀 블로그에 익숙하지 않은 사용자나 검색엔진을 통해 직접 이 페이지로 들어온 방문자는 콘텐츠 외에 스터디에 대한 추가 정보를 얻기 어려웠습니다. 이 문제를 개선하기 위해 포스트 상세페이지 내에서 '이 포스트는 OO스터디의 팀 블로그에서 발행된 콘텐츠'라는 정보를 제공하고, 해당 스터디 내에서 다른 콘텐츠들도 탐색 하기 쉬운 경로를 제공하는 것에 집중했습니다.
새로운 기능 3가지 추가
이번 리뉴얼 작업을 진행하며 추가 할 기능을 협의했습니다. 새롭게 추가 된 기능은 총 3가지로, 자동 목차 기능, 스터디 정보 배너, 플로팅 버튼 리스트 입니다. 자동 목차 기능은 이미 기획되어 있던 기능이며, 그 외 2가지 기능은 기존 페이지의 문제점을 해결하고 사용성을 개선하기 위해 구성하게 된 기능입니다. 각 기능에 대한 세부 작업 과정은 컴포넌트 제작 목차에서 이어집니다.
와이어프레임 제작
정보 중요도에 따라 각 기능의 대략적인 위치를 설정한 와이어프레임을 구성했습니다. 이렇게 하면 각 기능에 포함된 컴포넌트의 크기와 사용자 경험의 흐름을 대략적으로 예측할 수 있기 때문입니다.
정보 중요도 순위 정의
포스트 상세페이지의 주요 목적은 사용자가 '본문 내용을 열람'하는 것이며, 이는 페이지의 핵심 기능입니다. 새로운 기능 3가지(자동 목차 기능, 스터디 정보 배너, 플로팅 버튼 리스트)는 사용자가 본문을 더 쾌적하게 읽을 수 있도록 보조하는 역할을 합니다. 이로써 정보 중요도의 1순위는 본문 내용이고 2순위는 보조 기능으로 정의하였습니다. 이런 중요도에 따라, 본문은 화면의 중앙에 배치하고, 새로운 보조 기능들은 본문의 좌우와 하단에 배치했습니다.
자동 목차 기능 : 본문 좌측 사용자가 화면을 볼 때나 텍스트를 읽을 때 좌측부터 보는 습관을 참고했습니다. 대략적인 글의 구조를 파악할 수 있도록 화면의 좌측에 배치했습니다.
스터디 정보 배너 : 본문 하단 본문을 읽은 후 이 포스트가 포함된 팀 블로그에 대한 정보를 제공하고, 해당 팀 블로그의 다른 카테고리의 포스트를 둘러볼 수는 경험으로 연결하기 위해 본문 하단에 배치되었습니다.
플로팅 버튼 리스트 : 본문 우측 비교적 시선이 많이 가지 않으면서 마우스 커서가 자주 머무르는 공간인 우측에 배치되었습니다.
이렇게 사용자가 콘텐츠에 대한 몰입을 방해받지 않고 필요한 기능에 쉽게 접근할 수 있는 레이아웃을 구성한 후 각 기능에 대한 컴포넌트 제작을 진행했습니다.
컴포넌트 제작
① 자동 목차 기능
자동 목차 기능은 작성자가 블로그 에디터에서 제목 텍스트 스타일을 사용하면 자동으로 목차가 생성되는 기능입니다. 이렇게 생성된 목차는 포스트 상세페이지에서 나타나게 되고, 목차를 클릭하면 해당 섹션으로 스크롤되어 이동합니다. 이를 통해 독자는 원하는 내용을 빠르게 찾을 수 있습니다. 이 기능은 독자가 포스트를 더욱 효율적으로 탐색하고, 필요한 정보를 빠르게 찾아낼 수 있게 해줍니다. 또한, 작성자와 독자에게 전체적인 글의 구조를 파악하는 데 도움이 되는 장점도 있어 추가된 기능입니다.
유저타입에 따라 달라지는 플로우 분석
User Type 1(작성자)의 경우, 블로그 에디터에서 제목 텍스트 스타일을 사용하여 목차를 생성합니다. 이렇게 생성된 목차는 포스트 상세페이지에 자동으로 표시됩니다. User Type 2(독자)는 포스트 상세페이지에서 목차 항목을 클릭하면 해당 영역으로 자동으로 스크롤됩니다. 자동 목차 기능은 작성자가 먼저 목차를 생성해야 독자가 이를 사용할 수 있는 구조입니다.
목차 계층 구조 = 대제목 + 소제목, 총 2단계
웹 포스트의 경우, 독자는 특정 정보를 빠르게 찾지 못하면 쉽게 이탈할 수 있기 때문에 목차의 계층 구조는 직관적이어야 합니다. 그러나 와이어프레임 상에서 자동 목차 기능이 차지할 수 있는 영역이 좁기 때문에 계층을 깊게 설정한다면 목차와 본문 가독성이 모두 저하될 수 있습니다. 이러한 이유로, 대제목과 소제목으로 구성된 2단계 구조가 적합하다고 판단했습니다. 대제목과 소제목으로 구성된 2단계 구조는 글의 구조를 적절히 세분화하고, 독자가 필요한 내용을 빠르게 찾는 데 효과적일 것이라고 판단했습니다.
목차 UI 디자인 포인트 2가지
대제목과 소제목 계층 구조로 표현하는 방식에 있어서 다양한 방식을 시도해보았습니다. 첫번째로는 들여쓰기 방식을 이용했었는데, 영역의 너비가 넓지 않아 계층 구조를 표현하기에 충분한 공간이 확보되지 않는 문제가 있었습니다. 이런 문제로, 라인 그래픽을 이용해 대제목과 소제목의 계층을 구분하는 방식을 시도해보았고, 이 방식은 좁은 영역 안에서 세로정렬 계층 구조를 직관적으로 표현할 수 있는 장점이 있어 최종 UI로 선정하게 되었습니다.
또한 목차가 본문을 더 쾌적하게 열람하기 위한 보조기능이라는 점을 염두하여 본문 열람에 방해되지 않도록 작은 사이즈의 폰트와 배경색과 대비감이 적은 회색을 사용하고, 호버 및 하이라이팅 된 목차 영역은 REED의 프라이머리 컬러인 청록색으로 사용하게 되었습니다.
② 스터디 정보 배너
스터디 정보 배너는 기존 포스트 상세페이지의 문제점을 개선하기 위한 해결방안으로 만들게 되었습니다. 외부 검색 엔진을 통해 이 페이지를 진입한 사용자에게 이 포스트가 팀 블로그 내에서 발행되었다는 정보를 안내하고, 팀 블로그 내에서 다른 카테고리로 이동할 수 있는 경로를 제공하기 위해 추가된 기능입니다.
스터디 정보 배너 구성 요소
스터디 정보 배너는 본문 하단 영역에 위치해 있어, 본문 콘텐츠를 모두 읽고 해당 포스트가 속한 스터디의 정보 및 다른 콘텐츠를 탐색할 수 있는 경로 역할을 합니다. 스터디 정보는 크게 썸네일이미지와 이름, 멤버 리스트, 스터디 내 카테고리 리스트 안내 및 이동, 스터디 보러가기 버튼으로 스터디 전체공개 대시보드로 이동하는 경로를 제공합니다. 배너 안의 구성요소는 포스트 상세페이지에서 쓰인 컴포넌트 재활용함으로써 사용자가 해당 경로로 이동하는 것을 인지할 수 있도록 제작했습니다.
③ 플로팅 버튼 리스트
포스트 상세 페이지 내에서는 ①pdf다운로드, ②북마크, ③공유하기, ④리액션, ⑤댓글로 이동, ⑥맨 위로 이동까지 총 6개의 부가 기능이 있습니다.
①pdf다운로드는 태블릿으로 공부하는 사용자를 위해 제공되는 기능입니다. ④리액션, ⑤댓글로 이동, ⑥맨 위로 이동 기능은 본문 내용이 길어질 경우 더 쾌적한 사용성을 위해 추가하게 되었습니다. 사용자가 이 기능들을 쉽게 찾고 활용할 수 있도록, 기능들을 모아 한 눈에 파악 할 수 있는 UI를 제공하고 접근성을 높일 수 있도록 모니터 내에서 항상 표시되어야 할 필요가 있었습니다. 이러한 목적을 달성하기 위해 부가 기능을 리스트 형식의 *플로팅 버튼으로 제공하는 것으로 결정하게 되었습니다.
*플로팅 버튼(Floating Button) : 일반적으로 웹사이트나 모바일 애플리케이션에서 사용되는 UI 요소 중 하나로 화면 내에서 스크롤을 해도 계속 같은 자리에 떠 있는 것처럼 보입니다. 플로팅 버튼은 사용자에게 주요 행동을 유도하거나 쉽게 접근할 수 있는 기능을 제공하기 위해 자주 사용됩니다.
그러나 6가지 버튼을 하나의 리스트로 정렬하다 보니 클릭 영역이 너무 넓어지는 문제가 있어, 사용빈도가 가장 적을 것이라고 예상되는 pdf다운로드 기능은 포스트 썸네일 이미지 영역으로 이동시키게 되었습니다.
반응형 대응
REED는 반응형 웹사이트로 제작되어 이 페이지 또한 반응형 대응이 필요했습니다. 본문 영역은 웹사이즈에서도 너비가 넓지 않은 편이었기 때문에 모바일과 태블릿 디스플레이 사이즈에 맞춰 늘리거나 줄여도 사용성이 크게 변하지 않아 배치에 어려움이 덜 했습니다. 그러나 새로 추가된 자동 목차기능과 플로팅 버튼 리스트는 '세로정렬'과 '본문 영역 좌우에 배치'된 특징 때문에 모바일과 태블릿 사이즈에 대응하기 위한 새로운 UI를 제작해야 했습니다.
각 기능을 반응형으로 대응하기 위해 컴포넌트의 사이즈를 조정하거나, 사라지게 하거나, 위치 및 정렬 이동이 이루어졌습니다. 다음은 각 기능에 대한 세부 설명입니다.
① 자동 목차 기능 : 모바일 및 태블릿 사이즈에서는 사라지도록 설계했습니다. 디스플레이 너비가 좁아지며 추가적인 액션 없이, 본문 내용 열람에 방해 되지 않도록 자동 목차 기능을 배치하기 어려운 이유 때문입니다.
② 스터디 정보 배너 : 이 배너는 웹 사이즈에서도 본문 너비와 동일하게 제작했었기 때문에 반응형 대응 시 사이즈 조정 외의 변동 사항은 없습니다.
③ 플로팅 버튼 리스트 : 자동 목차 기능과 마찬가지로 세로 정렬 된 UI지만, 이 기능들은 태블릿 상에서도 항상 보여져야 하는 기능이기 때문에 디스플레이 너비가 좁아지며 BreakPoint에 따라 UI 디자인의 변동이 필요했습니다. 모바일 너비에 맞게 가로로 정렬을 수정하고, 사이즈 조정을 한 후 화면 우측에서 화면 하단으로 위치를 이동시켰습니다.
포스트 상세페이지 작업기록을 마무리하며
본문 영역의 너비가 좁은 와이어프레임을 그려서 추후 작업이 훨씬 수월했던 점
포스트 상세페이지 작업을 할 때는 블로그 에디터 페이지 작업 시작하기 전 단계였습니다. 때문에 본문 텍스트 스타일을 지정하지 않은 상태에서 새로운 기능 3가지를 화면 상에 배치하는 작업을 위주로 진행했습니다. 자동목차와 플로팅 버튼 리스트 기능을 추가하기 위해 본문 영역의 너비를 좁게 설정했었는데 이 부분이 나중에 작업을 더 수월하게 할 수 있었던 조건 같습니다. 우선 포스트 상세페이지의 태블릿, 모바일 사이즈 반응형 대응에 용이했고, 추후 블로그 에디터 페이지 작업을 할 때도 포스트 상세 페이지의 레이아웃과 동일한 구조를 사용했기 때문입니다.
팀 블로그 홈 부터 콘텐츠 영역의 너비가 꽉차지 않고 사이드에 여백을 충분히 둔 레이아웃은 반응형 대응에 유리하고, 컴포넌트들이 크게 변동 되지 않아 효율성이 좋다는 장점을 알게 된 작업이었습니다.
다음은 #4_블로그 에디터 포스트로 돌아오겠습니다!
모두 여기까지 읽어주셔서 감사합니다 🙌
