메모 앱 메몽의 와이어프레임 역기획

코드스테이츠 PMB 16기 W4D4

메몽

메몽은 애플 앱스토어의 유료 앱 차트에서 상당 기간 상위권을 차지하고 있는 인기 메모 앱이다. 귀엽고 아기자기한 디자인을 특징으로, 포스트잇 느낌의 다양한 메모지를 제공하여 목적에 맞게 쓸 수 있다. 

 

앱 서비스를 하나 선택해, 해당 앱에서 태스크를 1가지를 선정합니다. 해당 태스크가 사용자의 어떤 문제를 해결하는지 정의하고 이에 대한 User Story를 작성해 봅니다.

책을 많이 읽는 나는 읽은 책에 대한 생각을 간단히 기록하기 위해 독후감 형식의 메모지가 생기기를 원한다.

다양한 메모지가 저마다의 목적을 가지고 있는 앱이기 때문에 특정 메모지를 쓰고 싶어하는 고객을 선정할 필요가 있었다. 그 중에서도 나는 '책을 많이 읽는 사람'으로 타깃 유저를 선정했다. 더 구체적으로는, 책을 많이 읽는 사람 중에서도 너무 디테일하지 않은 간단한 독후감을 즐겨 적는 고객이라면 메몽의 독후감을 유용하게 쓸 수 있을 거라고 생각했다.

따라서 목적 역시 '읽은 책에 대한 생각을 간단히 기록하는 것'이며, 그러기 위해서 어느 정도 '독후감 형식이 갖춰진 메모지'를 필요로 할 것이라고 생각했다. 여기서 독후감 형식이라 함은 책 제목이나 저자 등을 적을 수 있는 별도의 칸이 있는 것을 의미한다.

 

Figma를 통해 위에서 구성한 화면의 Wireframe을 디자인합니다. Mid-Fi로 작성했다면, 디스크립션을 추가해서 스토리보드를 작성합니다.

⛔️메몽의 UI는 간단하고 직관적이어서 'Hi-Fi로 해도 되겠는데?'라고 생각했고 그것은 오판이었다..⛔️
똑같이 만드는 데 굉장한 시간이 소요되어서 와이어프레임보다는 실제 UI 디자인 작업의 느낌이라고 생각이 들었지만 이미 돌이킬 수 없는 강을 건넜기에 쭉 만들다가 처음으로 과제를 지각하게 되었다🥲

따라서 아래의 와이어프레임은 캡쳐가 아닌 직접 제작한 것이며,
다음에는 더 낮은 수준의 fidelity로 만들어야겠다고 생각했습니다.

1. 메인화면

2. 메모 추가하기 

3. 메모 생성하기

4. 메모 편집하기

 

UX 라이팅을 직접 작성한다고 생각하고 서비스를 더 좋게 만들어 봅시다. (기능에 대한 안내 혹은, 알림 문구 등) UX 라이팅 원칙을 생각하며 작성합니다.

와이어프레임을 만들어보며 느낀 개선점은, 우선 한글로 잘 안내되다가 중간에 뜬금 없이 영어로 된 레이블이 나타난다는 것이었다. 메모를 생성하는 과정에서 '메모 추가하기'가 있고 'Add memo'가 있다. 그리고 이 둘은 각자 다른 화면이다. 동일한 의미의 다른 언어를 각각 다른 화면에 적용하는 것이 좋은 방법 같지는 않다. 따라서 둘의 이름을 바꿔보았다.

'메모 추가하기' 화면에서는 사실 메모가 목록에 추가되지 않는다. 어떤 메모지를 사용할지 고르는 단계일 뿐이다. 따라서 '메모지 고르기'라고 바꿔주었다. 나도 앱을 처음 사용할 때 작성 후 생성이 된 줄 알고 나가서 메모를 날린 적이 있다. 또한 기존 'Add memo' 화면의 'Change' 버튼을 누르면 이 화면으로 돌아오는데, 이때도 '메모 추가하기'보다 '메모지 고르기'가 더 어울리는 말이라고 생각한다.

그리고 'Add memo'는 한글화를 하며 '메모 만들기'로 바꾸었다. 왜냐하면 as-is의 '메모 추가하기' 화면은 뒷쪽 dim 처리된 메인 화면에 전체 메모들이 있기 때문에 거기에 메모를 '추가한다'는 느낌이 들지만, 'Add memo' 화면으로 넘어오고 나서는 '추가한다'의 느낌은 사라지고 '만든다'의 느낌이 더 강하다고 생각했기 때문이다.

다만 바꾸려고 보니 왜 갑자기 화면명을 영문으로 썼는지 이해가 가기도 했다. 아마도 메모를 편집하는 부분이 전부 영어로 되어있기 때문인 것 같다. 그래서 맥락상 한글이 맞지만 이 화면만 놓고 보면 영어가 더 잘 어울려서 그런 것 같다. 그래도 나는 메뉴명은 한글로 통일하는 게 더 일관적이지 않을까 생각한다.

---

또한 Best Book이라는 메모지 명칭 역시 뭔가 이상하게 느껴졌다. 이름만 보면 (book은 단수이긴 하지만) 내가 읽은 최고의 책 목록이어야 할 것 같다. 따라서 좀 더 직관적으로 바꿔보기로 했다.

우선 메모지 레이블은 위 화면명과 같이 한글로 바꾸지 않은 이유는 다른 메모지들도 전부 영어로 통일되어 있기 때문이다. 이는 To Do List등의 같은 메모지는 한글로 번역하기보다 영어 그대로 쓰는 것이 더 자연스럽기 때문인 것 같다. 하지만 Best Book은 일단 메모지에 'Best'의 요소가 없는데 (감히) Book보다 앞에 와있어서 가독성이 떨어진다. 그래서 아예 Best를 빼고 Book을 넣어보았다. 하지만 뭔가 허전하고 '그래서 책이 어쨌다는 건데?'라는 느낌이 있어서 뒤에 Review를 붙여주었다. 100% 맘에 들지는 않아서 더 깔끔한 단어가 있다면 좋겠지만 현재 생각나는 최선은 이 정도이다.

---

실제로 결과물다운(?) 결과물을 만들어보니 개념들이 좀 더 명확하게 이해되는 것 같다.
프로그램 테스트 알바할 때 이런 스토리보드를 많이 봤었는데, 그때 그 많은 스토리보드를 전부 PPT로 제작했을 현업 분들이 대단하게 느껴지는 하루였다.