더 완벽한 '브런치'를 위한
페이퍼 프로토타입
아래의 글과 이어지는 내용입니다.
https://brunch.co.kr/@hyunn2/17
프로토타이핑은 소통의 도구이다.
프로토타입 (Prototype, Prototyping)
: 개발자가 실제로 코딩하기 전, 각 이해관계자들이 함께 보며 정보들이 어디에 위치해야 하는지를 이해하고 합의하기 위한 것
프로토타이핑의 의의
: 개발 전 기획 단계에서 생각치 못한 요소를 발견하고, 실제 유저의 플로우를 파악하여 개발 단계에서 가질 리스크를 방지
프로토타이핑의 단계
: 왼쪽부터 순서대로 Lo-Fi(Low Fidelity), Mid-Fi(Middle Fidelity), Hi-Fi(High Fidelity)
https://mentormate.com/blog/low-fidelity-wireframes-vs-high-fidelity-wireframes/Lo-Fi Prototype
: 핸드 스케치와 같이, 실제 출시될 서비스와 거리가 먼 초기 단계의 프로토타입
Mid-Fi Prototype (← PM이나 서비스기획자가 가장 많이 만드는 프로토타입)
: Lo-Fi를 발전시켜 레이아웃, 기능 배치, 폰트, 이미지 위치 등을 실제 산출물에 가깝게 조정
Hi-Fi Prototype
: 디자인과 인터랙션을 가미해, 실제 개발될 완성본에 가깝게 만드는 산출물
지난 번 브런치의 UX 분석을 통해 우선적으로 개선해야 할 점 3가지를 뽑아낼 수 있었다. 그 3가지는 아래와 같다.
1. 불친절한 UI와 UX 라이팅
2. 어수선한 콘텐츠 정렬
3. 모호하고 중복되는 인터랙션
위 문제점들을 개선하기 위해 아주... 작고... 소중한... 페이퍼 프로토타이핑을 진행해 보려고 한다.
자신은 없지만, 가보자고!
(혹시 지금 PM님, 기획자님, 또 브런치 관계자님이 읽고 계시다면... 그냥 귀엽게 봐 주세요...)
1. 불친절한 UI와 UX 라이팅
기존의 문제는 좌측 메뉴 바 각 섹션 이름이 직관적이지 못하다는 점, 그리고 설정 기능의 UI가 눈에 잘 띄지 않는다는 점이었다.
우선적으로는 설정 버튼을 위로 올린 후, 원형 아이콘으로 만든 뒤 배경을 넣어 눈에 잘 띄도록 개선하려고 한다.
또한 각 섹션을 탭할 때, 밑에 해당 섹션가 어떤 콘텐츠로 구성되어있는지 보여 주며 화면이 전환되게 개선할 예정이다.
또 브런치를 사용하면서 개인적으로 불편했던 점 하나가 브런치 북과 브런치 매거진 사용법이 없다는 것이었다.
따라서 프로필 '작품'란에 응모 버튼을 없애고, 사용법을 볼 수 있는 버튼을 만들었다. 응모와 관련한 버튼은 좌측 메뉴 하단에서도, 홈 화면에서도 볼 수 있기 때문이다. 사용법 버튼을 탭하면 해당 기능 소개와 사용법이 적힌 페이지로 넘어간다.
그리고 작가 프로필 아래에 작은 편지 아이콘의 형태를 띄고 있던 '작가에게 제안하기' 기능을 아예 직관적인 문장 UI로 바꿨다. 글쓰기 기능은 좌측 메뉴 바에도 프로필 바로 밑에 존재하고, 또 균형적인 배치를 위해 삭제했다.
2. 어수선한 콘텐츠 정렬
출처: 직접 제작 (@hyunn2)다음 문제는 어수선한 콘텐츠의 정렬이다. 홈 화면에서 총 30번의 화면 전환이 이루어짐에 있어서 추천 콘텐츠들이 정렬되어있지 않았고, 반복되는 내용도 많았던 것이 문제였다.
위로 슬라이드 하면 다음 화면, 아래로 슬라이드 하면 이전 화면으로 넘어가는 인터랙션은 유지한 채로 콘텐츠의 구성을 카테고리화 하여 변경하고자 한다.
추천 글이 뜨는 순서는 '브런치 북 → 에세이 → 그림/만화 → 내 맞춤 작품'으로 뜨게 하며, 각 카테고리는 총 3번의 화면 전환으로 구성한다. 따라서 30번의 화면 전환에서 12번의 화면 전환으로 수를 줄일 수 있고, 콘텐츠의 순서도 예측 가능하기 때문에 사용자 경험에 긍정적인 효과를 줄 것이다.
가장 정렬되지 않았던 섹션은 '브런치 나우'였다. 각종 주제, 인기글, 추천 작가, 추천 브런치북 등이 중구난방으로 섞여있어 어수선하다는 느낌이 들었다.
브런치 나우는 최근 올라온 작품들을 보여 주는 섹션이기 때문에 다른 콘텐츠는 빼고 실시간 인기글 차트로 구성하려고 한다. 실시간의 기준은 한 시간이며, 한 시간마다 업데이트 된다. (rf. 다음카페 실시간 인기글 섹션)
또, 기존 가로로 무작정 스크롤을 해야 했던 주제 카테고리를 왼쪽으로 빼 가나다 순으로 정렬했으며, 해당 부분을 상하로 슬라이드하거나, 옆에 스크롤 바를 이용하여 빠르게 찾을 수 있다. 그 위에는 가장 많이 올라오고 있는 주제 3개를 띄우려고 한다.
3. 모호하고 중복되는 인터랙션
출처: 직접 제작 (@hyunn2)해당 문제는 '브런치 홈' 섹션에서 발견된 문제였다. 왼쪽으로 슬라이드를 하면 이전 화면으로 전환되고(아래로 슬라이드하는 것과 중복된 결과를 가져 옴), 오른쪽으로 슬라이드를 하면 다음 화면 전환이 아닌, 좌측 메뉴 바가 나오는 것이 문제였다.
원래는 오른쪽 슬라이드에 따른 결과도 바꿀까 했지만, 메뉴 바가 좌측 상단에 있다 보니 슬라이드하며 글을 넘길 때 바로 메뉴 바를 볼 수 있다는 점에서 유지하기로 하였다.
대신 왼쪽으로 슬라이드를 했을 때에는 이전 화면으로의 전환이 아닌, 좌측 메뉴 바와 동일한 형태의 팝업 화면이 등장한다. 해당 화면에는 위에서 말했듯 순서대로 나열되어 있는 콘텐츠 카테고리를 탭하여 원하는 콘텐츠로 넘어갈 수 있으며, AI 알고리즘이 추천하는 내 맞춤 작품으로 넘어갈 수 있다.
브런치 홈의 타이틀도 변경했으며, 해당 섹션은 브런치가 추천하는 콘텐츠들로 구성되어있기 때문에 간단한 한 줄 소개도 추가하였다.
요구사항 정의서 (PRD)
출처: 직접 제작 (@hyunn2)위의 내용을 간단하게 작성한 요구사항 정의서이다.
#PM #프로덕트 매니저 #IT #기획 #UX #UI #CX
