[코드스테이츠 PMB 9기] W4D3 티스토리 UX / UI 개선 Lo-Fi 프로토타입

앱, 혹은 웹 서비스 1개를 선택합니다. (Day 1에서 분석한 서비스여도 좋습니다.)
해당 서비스가 가지고 있는 Flow에서 UX 개선이 필요한 부분을 서비스 이용자의 관점에서 정의 및 분석합니다. 
이를 바탕으로 어떻게 화면(UI)을 개선할 수 있는지에 대해 페이퍼 프로토타입을 제작해 봅니다.

---

[코드스테이츠 PMB 9기] W4D1

---

티스토리  사용자의 Flow 파악

자, 우선 티스토리 메인 페이지 접속에 접속한다

그 다음 로그인을 한다 참고로 신규 가입자라면 대부분 카카오계정으로 로그인을 하도록 되어있다

로그인에 성공했다면, 오른쪽 상단의 프로필 아이콘 클릭한 다음, 글을 쓰길 원하는 블로그 오른편에 위치한 연필 모양의 글쓰기 아이콘 클릭한다

글쓰기 페이지에 진입한다 현재까진 문제가 전혀 없다 군더더기 없이 깔끔하고 아름다운 GUI 완벽해

본격적으로 오늘 작성할 내용의 대표 이미지를 가져와서 첨부한다

그 다음 코드스테이츠 측에서 내주신 과제 설명을 추가하기 위하여 인용 기능을 사용한다 물론 이는 고정된 글꼴이다 (지난 W4D2 포스팅 참고)

그 다음, 포스팅을 위하여 캡쳐한 이미지들을 내가 경험한 사용자 흐름에 맞도록 첨부해본다

위에 첨부된 이미지에서 강조하고 싶은 부분이 있어서 티스토리 자체 사진 편집 기능을 사용해보려고 했다

위의 4가지 기능이 있음을 확인했다 하지만 내가 원하는 기능은 없었다

그렇다 바로 여기서 이탈이 발생한다 나는 파워포인트로 사진을 편집하는 것이 가장 편하기 때문에 파워포인트를 켜서 강조하고 싶은 부분에 표시를 했다

(이것이 바로 메타인지인가요) 또, 그것을 설명하는 이미지를 한 눈에 보기 쉽도록 콜라주하기 위하여 또 다시 파워포인트로 사진을 편집한다

---

사용자 Flow에서 개선이 필요한 UX

사진 첨부 및 편집 기능

 

그렇다. 내가 생각하는 개선이 시급한 UX는 바로 사진 첨부 및 편집 기능이다. 그러기에는 지난 UX 분석 포스팅에서 빠지지 않았냐고? 이를 설명하기 위해서는 수많은 캡쳐 사진이 필요한데, 티스토리 사진을 첨부하고 편집하는 UX가 복잡해서 의도적으로 뺐다고 말할 수 있을 것 같다. 안일한 선택이었지만, 이는 당연히 UX가 불편했기 때문에 벌어진 일인 것이다. 오늘은 정말 각오를 하고 시작한 것이다.

티스토리는 사진 첨부 및 편집 기능이 빈약해도 너무 빈약하다. 내가 사용자로서 티스토리의 Flow를 살펴본 결과, 첨부할 사진들을 보기 좋게 편집하기 위하여 사진 편집 프로그램(내 경우에는 Powerpoint)를 켰다가 티스토리 글쓰기 페이지를 켰다가 반복한다. 이 과정에서 티스토리는 안 그래도 임시 저장도 안 되는데, 오류라도 나는 날에는 진짜 과제하다가 포기하고 싶은 마음이 든다. (사실 한번 경험이 있다) 

그렇다면 사진 첨부 및 편집 기능을 잘 활용하는 서비스형 블로그로 무엇이 떠오르는가? 나는 단연 이름부터 똑똑해보이는 "Smart Editor"를 사용하는 네이버 블로그가 떠올랐다. 물론 이 연상은 내가 네이버 블로그 서비스 사용자인 이유도 있을 것이다. 그렇다면, 사진을 첨부하고 편집하면서 흐름에 끊김이 없다고 느꼈던 네이버 블로그의 사진 첨부 및 편집 flow를 한번 살펴보도록 하자.

 

---

앞 부분은 생략하고 바로 사진을 추가해보곘다 (확실히 GUI는 네이버보다는 티스토리의 깔끔함이 내 취향이다 하지만 그래서 기능이 더 없을수도)

사진을 여러장을 동시에 추가하니 위와 같은 팝업이 뜬다 나는 사진 여러 장을 한번에 합치고 싶으니까 '콜라주'를 클릭해보겠다

편-안. 바로 이거지. 내가 바로 간절하게 원했던 기능이다. 굳이 파워포인트를 켜지 않아도 한 눈에 보기 쉽도록 합쳐지는 편집.

슬라이드 형식도 궁금할 것 같아서 한번 사용해봤다 이 기능은 가로 이미지보다는 세로 이미지를 사용하면 효과적으로 사용할 수 있다

오른쪽에 보이는 주황색 박스 안은 티스토리의 기능과 크게 차이는 없지만 주목할 것은 왼쪽 하단 박스다 저 상태에서 드래그를 통해 사진 순서를 변경할 수 있다

---

티스토리 사진 첨부 및 편집 UX 개선을 위한 UI Lo-Fi 프로토타입

Lo-Fi Prototype(Low Fidelity Prototype)은 핸드 스케치와 같이, 실제 출시될 서비스와 거리가 먼 초기 단계의 프로토타입입니다. 이 방법은 시간 및 리소스가 절약되고, 복잡한 수정 절차가 없기 때문에 새로운 의견을 바로 적용하는 것이 가능합니다. 따라서, 아이디어 회의와 같은 기획 단계에서 자주 작성합니다. 그러나 팀 간 소통을 위한 정식 업무 산출물은 아니고, 유용한 임시방편 정도로 생각해주시면 좋습니다.

 

 

---

참고자료

[코드스테이츠 PMB 9기] W4D1

외주를 맡기려면 뭐부터 해야하죠? 3. 요구사항 정의서 쓰기

네이버뮤직 앱 IA(정보구조) 분석 연습