안녕하세요👋 REED Design 입니다 :)
REED 디자인 작업기를 공유해 보려고 합니다. 저와 같은 신입, 주니어 프로덕트 디자이너 분들께 도움이 되길 바라며..💫
시작해보겠습니다!
첫번째 작업은 '#1 자유게시판 피드 형식으로 개선하기' 입니다.
자유게시판을 피드 형식으로 바꾸자!
자유게시판을 '스터디의 활동성'을 보여주는 가벼운 소통의 공간으로
자유게시판을 제목 리스트 형식 UI에서 피드 형식 UI로 개선하는것이 REED에 합류해 첫번째로 하게 된 작업이었습니다.
자유게시판을 피드 형식으로 리뉴얼 하는 목적은 스터디 외부 방문자가 자유게시판을 통해 스터디의 성향을 충분히 탐색한 후 가입요청을 할 수 있도록 정보를 제공하기 위함입니다. 이러한 목적을 달성하기 위해 피드 형식의 UI를 사용하게 된 것 입니다!
피드 형식 UI의 특징은?
REED 자유게시판에서는 피드의 연속 스크롤로 최신 업데이트 콘텐츠를 확인, 사용자간의 상호작용 키워드에 집중하였습니다.
자유게시판 프로세스 오버뷰
① 레퍼런스 리서치
② 체크리스트 협의 및 정책 정의
③ 피드 카드 레이아웃 제작
④ 자유게시판 전체 페이지 레이아웃 제작 (feat. 사이드바에 대한 회고)
⑤ 자유게시판 글쓰기 플로우
① 레퍼런스 리서치
REED에서 자유게시판의 용도는?
REED는 블로그 포스팅 기능이 있기 때문에 자유게시판은 포스팅 내용과 다르게 가벼운 글이나 일상적인 이야기를 자주 나눌 수 있는 소통의 공간을 목적으로 두고 있었습니다. 소통의 공간이 목적인 만큼 소셜 네트워크 서비스에서 빠질 수 없는 피드 형식의 UI로 리뉴얼 하게 되었습니다.
레퍼런스로 분석할 서비스 선정 기준 정하기
작업에 앞서 REED의 자유게시판에서 참고할 만한 UXUI를 찾아보기 위해 레퍼런스 리서치를 진행했습니다. #반응형 웹, #블로그 서비스, #텍스트 기반의 정보 공유 플랫폼 키워드를 주제로 분석할 서비스 4가지를 선정했습니다.
디스콰이엇, 미디엄(팀블로그), 원티드(소셜), 당근 앱(모임)의 피드 UI를 분석했습니다.
각 서비스의 피드 UI를 분석한 내용을 크게 정리하자면 다음과 같습니다.
레퍼런스 리서치 및 분석 결과 REED의 '자유게시판' 서비스는 원티드의 '소셜'이나 당근의 '모임'과 같은 'Subfeature'의 특징을 가졌다는 사실을 알게 되었습니다. 결론적으로 자유게시판 피드 형식 리뉴얼의 방향성을 3가지로 추려보면 다음과 같습니다.
1. 가벼운 내용을
2. 짧은 피드 안에
3. 스크롤 만으로 추가액션 없이 볼 수 있는 플로우
② 체크리스트 협의 및 정책 정의
REED 팀원분들에게 리서치 내용을 공유 후 디자인을 들어가기 전에 피드 컴포넌트에 들어갈 요소, 정책들을 체크하는 시간을 가졌습니다.
정방형 이미지와 본문으로 구성된 피드
팀원분들 모두 자유게시판이 Subfeature인 만큼 피드가 짧게 구성되는 것, 액션을 최소화하고 스크롤 만으로 전체 내용을 볼 수 있게 하는 것이 중요하다고 생각했습니다. 타이틀을 빼고 이미지와 본문으로 구성된 피드를 구성하게 되었으며, 짧은 피드를 위해 글자수를 300자까지 제한하게 되었습니다. 그리고 피드의 장점인 이미지 콘텐츠를 강화하기 위해 '이미지 장수는 5장'으로 결정하게 되었습니다.
이미지 비례를 정방형으로 고정하게 된 이유
다만 이미지의 경우 모바일 비율의 스크린샷 이미지는 피드 길이가 지나치게 길어지거나, 연속되는 다음 장의 이미지 크기와 맞지 않을 것을 고려해 이미지는 정방형 크기로 고정하게 되었습니다.
③ 피드 카드 레이아웃 제작
앞서 협의된 정책을 바탕으로 피드 한 개가 완성되었습니다. 이미지를 5장까지 업로드 할 수 있기 때문에 이미지 하단에 순서와 이미지 장수를 알 수 있는 인디케이터가 추가되었습니다. 인디케이터는 이미지가 두장 이상일 때부터 나타납니다.
틈새 인사이트 : 피드 UI의 장점을 살리기 위해서 카드의 너비를 줄이기
피드 형식의 장점인 '스크롤'이 원활하게 이루어지기 위해서는 카드의 가로의 너비가 짧은 것이 효과적이라는 점을 알게 되었습니다. 카드의 너비가 길면 텍스트 한 줄의 길이가 길어지게 되고, 동시에 사용자의 시선이 움직이는 동선도 길어지며 스크롤이 느려지게 됩니다. 그렇게 된다면 피드의 장점을 활용하지 못하게 되기 때문입니다.
④ 자유게시판 전체 페이지 레이아웃 제작 (feat. 사이드바에 대한 회고)
피드 카드의 너비를 줄이다보니 페이지 공간이 넉넉해졌습니다.
글 작성 버튼 크기와 위치
피드 상단에는 글 작성 버튼 UI를 배치했습니다. 비교적 많은 영역을 차지하게 되었는데, 이유는 자유게시판의 활발한 이용 빈도와 글쓰기 접근성을 높이기 위함이었습니다.
(feat. 자유게시판 사이드바에 대한 회고)
우측에는 소통의 원활함을 위해 [이달의 인기글, 이달의 수다왕, 새로운 멤버]와 같은 순위 집계 및 추천 기능이 있는 사이드 바를 배치했습니다.
그러나... 이러한 데이터 집계를 이용한 UI는 유저가 많지 않은 프로덕트 초반일 경우 신중해야 겠다는 생각이 들었습니다. 왜냐하면 프로덕트 초기에는 이달의 글이 '0개' 일 수도 있기 때문입니다.. '이 달의 OOO'이 아니라 전체 '조회수 순'으로 기준을 수정하거나, 집계할 데이터가 없을 때 보여줄 Empty State UI를 다양하게 제안해도 좋을 것 같다는 생각이 들었습니다.
⑤ 자유게시판 글쓰기 플로우
피드를 만들었다면, 피드를 쓸 수 있는 글쓰기 플로우도 만들어야 합니다. 글 작성 버튼은 피드 작업 후 상단에 배치시켰고, 글 작성 버튼 클릭 시 REED의 다른 서비스와 유사하게 모달 창을 이용해 만들게 되었습니다. 이미지를 여러 장 업로드할 수 있는 UI와 글자 수 제한 정책 안내를 추가했습니다.
이미지를 5장 업로드할 수 있기 때문에, 5장 중 특정 이미지를 선택해 삭제/수정이 가능하도록 이미지 썸네일 컴포넌트 우측 상단에 X(삭제) 버튼을 추가하였습니다. 5장을 모두 업로드하면 이미지를 업로드할 수 있는 +(추가) 버튼이 사라집니다.
자유게시판 작업기록을 마무리하며
이렇게 자유게시판 작업기가 마무리되었습니다. 작업 시기가 23년 11월이었으니 4개월 전이네요! 프로덕트 디자이너로 다른 직무분들과 협업, 반응형 웹 디자인 작업도 처음이라 더 기억에 남는 것 같습니다. 이렇게 블로그에 남겨보니 그 당시 예상하지 못한 문제를 발견하고, 해결 방안까지 생각해 보는 기회가 된 것 같습니다.
자유게시판, 이것까지 생각했으면 좋았겠다.. 싶은 점 2가지
1. 프로덕트 유저 수를 고려해서 사이드바의 집계 기준 혹은 Empty State UI까지 생각해보았다면 더 완성도 있는 사용자 경험을 제공하지 않았을까..
2. '콘텐츠 서비스'에 관련해 수정/삭제/신고 기능은 필수적으로 생각해야 할 기능이라는 걸 알게되었습니다. 댓글 수정/삭제/신고 기능은 염두해 두었었지만, 당시 게시물 자체에 대한 수정/삭제/신고 기능을 생각하지 못했었습니다. 앞으로 콘텐츠 업로드 관련 프로덕트 디자인을 할 때 꼭 생각해보아야 할 체크리스트 인 것 같습니다.
프로젝트를 기록하고 느낀 점
프로젝트가 완료 되어도 블로그에 이 과정을 기록하지 않고서는 몰랐을 점들을 많이 알게 된 것 같습니다. 추상적이던 인사이트를 구체적으로 시각화, 문서화 하는 기회가 되었습니다. 앞으로 꾸준히 사용자 경험을 개선하기 위해 부지런하게 기록해보겠습니다. 프로덕트 개선점에 대한 의견이나 피드백이 있다면 자유롭게 댓글로 남겨주시면 많은 도움이 될 것 같습니다!
다음엔 [REED]_#2팀 블로그 홈 작업 기록으로 찾아오겠습니다 🥳
모두 여기까지 읽어주셔서 감사합니다 🙌
