안녕하세요👋 REED Design 입니다 :)
#1 자유게시판 피드 형식으로 개선하기 포스트에 이어서 REED 두번째 작업기록을 공유해 보려고 합니다!
이번 주제는 팀 블로그 홈 리뉴얼입니다. 이 프로젝트는 컴포넌트를 반응형 웹에 최적화하는 작업과 더 좋은 사용성을 위해 레이아웃의 와이어프레임을 다양하게 만들어 봤던 점이 기억에 남네요!
그럼 #2 팀 블로그 홈 작업기록 시작해보겠습니다!
팀 블로그 홈과 REED 사이트 구조
팀 블로그 사이트는 스터디 사이트와 분리된 공간이며 회원가입이나 로그인을 하지 않은 방문자들 모두 팀 블로그의 글을 열람 할 수 있는 전체공개 공간이기도 합니다. 방문자에게 우리 팀의 아웃풋과 전문성을 보여 줄 수 있는 공간이라고 요약할 수 있습니다!
Q. REED 사이트에서 팀 블로그 홈은 어떤 역할을 하고있나요?
REED는 팀 운영에 집중할 수 있는 [스터디 홈]과 블로그를 한 눈에 볼 수 있는 [팀 블로그 홈] 사이트 두가지로 나뉘어져 있습니다. 이 두 공간은 다른 이용 목적을 가지고 있습니다. 같은 서비스 내에서 두가지 사이트를 운영하고 있기 때문에 더 쉬운 이해를 돕고자 간단한 서비스 구조도를 첨부해보았습니다.
요약하면, 팀 운영과 관련된 활동은 [스터디 홈] 공간에서, 지식과 정보를 기록하는 활동은 REED [팀 블로그 홈] 공간에서 목적에 맞는 활동을 효율적으로 진행 할 수 있습니다.
Q. 왜 팀 블로그 홈을 개선하나요?
작업 시점 당시 REED의 [스터디 홈]은 리뉴얼이 되었지만, [팀 블로그 홈]은 리뉴얼 전인 상황이었습니다. 위 이미지처럼 두 사이트의 디자인 시스템이 통일되지 않아 전혀 다른 서비스처럼 보입니다. 최우선 과제는 [스터디 홈]의 디자인 시스템을 [팀 블로그 홈]에 적용하는 작업이었습니다.
팀 블로그 홈 이후로 연속적으로 개선해야 할 페이지들 고려하기
또한 팀 블로그 홈에 이어서 포스트 상세 페이지와 블로그 에디터 페이지의 리뉴얼도 고려하면서 작업해야 했습니다. 이 페이지들은 서로 가깝게 연결 된 페이지들이기 때문에 사용성과 UI 스타일이 조화롭게 디자인 되어야 한다는 점을 염두해두고 팀 블로그 홈 작업을 먼저 시작하게 되었습니다.
Q. 어떻게 팀 블로그 홈을 개선할 건가요?
팀 블로그 홈 리뉴얼의 목표는 두가지 였습니다.
[팀 블로그 홈] 리뉴얼 프로젝트를 들어가기 앞서 필요한 사전 조사를 마치고, 프로젝트의 목표를 정의한 후 작업을 시작하게 되었습니다.
프로세스 오버뷰
① REED 팀 블로그 홈의 역할 정의하기
② 기존 팀 블로그 홈 에서 유지/제거/추가할 기능 정하기
③ 와이어프레임 제작
① REED에서 팀 블로그 홈의 역할 정의하기
많은 유저들이 이용하고 있는 '팀 빌딩'과 '팀 블로그' 서비스
요즘은 협업이나 사이드 프로젝트를 쉽게 시작할 수 있도록 여러 직군의 사람들을 연결하는 서비스가 많아졌습니다. 이러한 흐름에 맞춰 개인 블로그를 넘어 팀으로 프로젝트를 진행하며 인사이트를 기록할 수 있는 팀 블로그 서비스 또한 많아졌습니다.
팀 블로그는 팀의 브랜딩, 마케팅의 역할도 하며 예비 지원자들에게 '우리 팀은 이런 공부/일을 해요' 라는 정보를 시공간에 구애받지 않고 구체적으로 전달할 수 있는 방법이기도 합니다.
Q. REED가 다른 팀 빌딩/블로그 플랫폼 서비스와 다른 점은?
REED는 팀 빌딩과 팀 운영관리, 팀 블로그 서비스 3가지 기능을 모두 제공하고 있습니다. 타 서비스와 크게 다른 점 한 가지는 효율적인 팀 활동을 할 수 있도록 돕는 팀 운영/관리 서비스를 제공하고 있다는 점입니다. 팀을 만들고 난 후에 팀 멤버와 소통할 수 있는 메신저, 자유게시판, 일정공유 등의 기능을 이용할 수 있기 때문에 다른 sns 서비스를 추가적으로 사용하지 않아도 효율적인 팀 활동을 이어 갈 수 있습니다. [스터디 홈]공간과 [팀 블로그 홈] 사이트가 나누어 진 것도 이와 같은 맥락 때문입니다.
Q. 팀 블로그 홈 공간을 어떤 공간으로 정의하고 리뉴얼 할 것인가?
현재, [스터디 홈]은 REED의 주요 사이트로서 팀 빌딩, 팀 운영/관리와 관련된 다양한 기능을 제공하고 있습니다. 이에 따라 이번 [팀 블로그 홈]의 리뉴얼에 많은 기능을 추가할 경우, 사용자들이 두 공간 사이를 혼란스러워할 수 있다는 우려가 있었습니다. 따라서 이번 리뉴얼 작업에서는 새로운 기능을 추가하는 방향은 지양하고, '한 팀을 자세히 살펴볼 수 있는 공간'으로 개선하는데 집중하기로 결정했습니다.
② 기존 팀 블로그 홈에서 유지/제거/추가할 기능 정하기
(유지) 썸네일 카드의 형식 : 이미지 썸네일 + 타이틀 + 본문 + 작성자/시간 요소로 구성된 카드 UI는 우리가 흔히 접할 수 있는 UI입니다. 이 형식의 UI는 포스트를 선택해 클릭하기 까지 유용한 정보를 제공하기 때문에 기존의 요소를 포함하여 디자인을 개선하는 방향으로 진행했습니다.
(유지) 카테고리 분류 : [스터디 홈]에서 각 팀마다 포스팅 카테고리를 정할 수 있습니다. 이 팀에서 어떤 토픽의 포스팅을 하는 지 한 눈에 볼 수 있는 기능이기 때문에 이 기능도 그대로 유지하였습니다. 다만, 새로운 레이아웃에 맞게 위치와 컴포넌트 형태, 인터랙션을 조정하기로 하였습니다.
(유지) 검색 기능 : 검색 기능은 [스터디 홈]에서 제공하는 스터디 검색 기능과 같으며, 스터디 홈과 동일하게 GNB로 위치를 변경하였습니다.
(제거) 페이지네이션 기능 : 자유게시판에서 피드 형식의 UI를 제작해보며 느낀 스크롤의 장점을 살리고, 스크롤만으로 많은 포스트를 훑어 볼 수 있도록 개선하기 위해 페이지네이션 요소를 제거하였습니다.
(보류) 팔로우 기능 : 관심있는 스터디를 팔로우하고, 포스팅을 볼 수 있는 팔로우 기능입니다. 이 기능은 관련 플로우를 새롭게 설계해야했기에 일정상의 문제로 이번 리뉴얼에서는 보류하게 되었습니다.
(추가) 스터디 소개 배너 : 팀 블로그 홈 리뉴얼의 목표인 '하나의 스터디를 자세히 살펴 볼 수 있는 공간'을 고려해 해당 스터디에 대한 기본 정보와 스터디 소개 정보를 담은 배너 영역을 따로 만들어 추가하기로 결정했습니다. 로그인 회원이 아닌 방문자들도 포스트 뿐만 아니라 해당 스터디에 대한 정보를 얻을 수 있도록 하기 위함입니다.
(추가) 댓글, 반응 수 정보 : 댓글과 반응 수에 대한 정보를 썸네일에 추가하여 포스트 상세 내용을 보기 전에 사용자에게 추가적인 정보를 제공하려고 하였습니다.
③ 와이어프레임 제작(feat.반응형 대응)
팀 블로그 홈의 역할과 기능 재정의 과정을 거쳐 와이어프레임을 제작한 후 최종적인 페이지가 완성되었습니다. 새로운 팀 블로그 홈의 디자인을 확정하기 까지의 과정을 구체적으로 살펴보겠습니다.
스터디 정보 배너
방문자가 팀 블로그 홈에 진입했다는 가정 하에, 가장 상단에는 해당 스터디에 대한 요약 정보가 필요하다고 생각했습니다. 이 스터디가 어떤 카테고리에 속하는지, 스터디 멤버 구성은 몇명인지, 어떤 내용으로 스터디를 소개하고 있는지 알아야 글에 대한 이해도가 높아질 것이라고 생각했기 때문입니다. 그래서 스터디 정보 배너를 2가지 시안으로 제작했었습니다.
1차와 2차 시안의 정보 구성은 같지만, 스터디의 핵심 정보를 요약해서 보여 줄 때 어떤 형태로 보여줄 것인가에 대한 차이가 있습니다. 1차 시안은 표 형식을 이용하여 보여주고, 2차 시안은 비교적 작은 영역 안에 정보를 모아 놓은 형태를 취하고 있습니다. 개인적으로 1차 시안의 형태가 정보 가시성이 좋다고 생각했지만, 최종적으로 2차 시안을 채택하게 되었습니다. 그 이유는 REED의 모든 페이지는 반응형 웹을 지원하고 있는 상황이었고, 2차 시안이 반응형에 대응하기에 더 유리하다고 판단되었기 때문입니다.
왼쪽은 모바일에서 사이즈에서 본 배너이고, 오른쪽은 웹에서 보는 배너입니다. 작은 영역에 정보를 집약적으로 모아두니 모바일 사이즈의 배너에서도 웹 사이즈의 배너와 통일성을 유지하기 쉬웠습니다.
포스트 썸네일 UI
다음은 포스트 썸네일 입니다. 썸네일의 버전은 2가지 형식으로 제작되었습니다. 1번 카드 형식은 이미지를 강조한 썸네일로 추천/인기 포스트를 보여주기 적절한 형식입니다. 2번 리스트 형식 썸네일은 한 페이지에 많은 포스트를 띄울 수 있다는 장점이 있고, 최신순으로 포스트를 볼 때나 특정 카테고리를 클릭 했을 때 사용하기 적절합니다.
카테고리 분류
[스터디 홈]에서는 스터디 내부적으로 카테고리를 관리 할 수 있는 기능을 제공하고 있습니다. 방문자는 물론 팀 내 멤버들이 효율적으로 정보를 분류하고 찾을 수 있는 기능이기에 스터디 소개 배너 하단에 카테고리를 뱃지 형식으로 배치하였습니다. 가로로 스크롤 할 수 있는 인터랙션으로 웹과 모바일에서 동일하게 작동 할 수 있다는 장점이 있습니다.
팀 블로그 홈 작업기록을 마무리하며
이렇게 해서 팀 블로그 홈 리뉴얼 작업기록이 마무리 되었습니다. 내용이 생각보다 길어져서 생략된 내용도 있지만 그런 내용들을 작은 주제로 나누어서 포스팅을 하려고합니다. 다른 기능을 제공하고 있는 [스터디 홈]과 [팀 블로그 홈] 사이트 간의 디자인시스템을 통일하고, 두 공간 사이의 연결성을 고려하는 작업이었습니다. 당시 작업할 때는 몰랐지만 지금 기록을 해보니 난이도가 높은 프로젝트였던 것 같습니다. 포스팅을 시작하며 직접 사용자가 되어보니 개선해야 할 부분들도 많이 발견한 계기가 되었습니다.
팀 블로그, 이것까지 생각했으면 좋았겠다.. 싶은 점
1. 자유게시판과 마찬가지로 '이 달의' 인기 포스트 라는 집계기준을 사용한 것입니다. '이 달의 인기 포스트' 라는 기준보다 콘텐츠를 더 쉽게 추천 할 수 있는 집계 기준을 생각해보아야 겠습니다.
2. 스터디 정보 배너에 위치한 스터디 가입하기 버튼은 현재 스터디 대시보드로 연결되어있습니다. 버튼명을 '가입하기'보다 가벼운 느낌인 '둘러보기'와 같은 버튼명으로 변경하면 좀 더 좋았겠다는 생각이 들었습니다. 아무래도 방문자가 팀 블로그의 포스트를 읽고 해당 스터디에 가입하려는 결정을 곧바로 내리기는 어려울 것 같기 때문입니다.
이번 포스트는 뭔가 길고..길었네요.. 여기까지 읽어주셔서 감사합니다! 언제든지 프로덕트 개선에 대한 의견이나 피드백이 있다면 자유롭게 댓글로 남겨주세요!
다음 포스트는 지금 이 페이지인 [REED]_#3 포스트 상세페이지 작업 기록으로 찾아오겠습니다 🥳REED Design 입니다 :)
