Design Memento 2 : UI

8월 8일, 2017

Design Memento Series

Part 1: UX
Part 2: UI

1. 서론

지난 포스트에선 메멘토 프로젝트를 진행하며 배우고 느꼈던 점을 UX(사용자 경험) 관점으로 정리해했는데, 이번에는 UI(사용자 인터페이스) 관점에서 써보려 합니다.

물론 저는 전문 디자이너가 아니고, 취미 삼아 디자인을 하는 정도이기 때문에 사실 디자인에 대해서 여러분께 무언가를 가르치거나 인사이트를 주기 어렵다고 생각했습니다. 그래도 최대한 제가 가진 상황에서 UI 관점에서 좋은 글을 쓰기 위해 몇 가지 생각을 해보았는데, "제가 디자인한 결과물"과 "전문 디자이너가 디자인한 결과물"을 비교해서 분석하는 글을 쓰면 어떨지 생각해보았고, 상당히 의미 있는 시도라 생각하여 이번 글에는 위의 내용을 담았습니다.

2. 기능 소개

우선 UI 화면을 소개하고 비교분석하기 전에 메멘토에 어떤 기능들이 있는지를 간단하게 소개해드리려 합니다.

인물 매거진 사건 매거진 메멘토 홈 위클리 메멘토
요약 탭
타임라인 탭
사진 탭
인맥 탭
요약 탭
관련 사진 탭
관련 기사 탭
3줄 요약 탭
- -
샘플 페이지 샘플 페이지 샘플 페이지 샘플 페이지

인물 매거진

특정 인물에 대한 정보를 자동으로 정리하여 모아서 보여주는 기능으로, 시간순으로 중요했던 사건을 나열해서 보여주거나, 검색 트렌드와 사건을 함께 분석하여 이 인물이 어떤 이유로 대중에게 알려지게 되었는지를 알려주는 등의 내용으로 구성되어 있습니다.

사건 매거진

인물이 아닌 사건 중심으로 정보를 정리한 기능이며, 단순 내용 정리가 아닌 대중의 반응이나 현장의 분위기 등을 담아 더 폭넓게 사건을 이해하고 공감할 수 있도록 내용을 구성하려 했습니다.

메멘토 홈

메멘토 서비스를 처음 접할 때 나타나는 화면으로, 볼만한 컨텐츠를 인물과 사건 중심으로 추천해주는 기능을 담았습니다.

위클리 메멘토

한 주 동안의 중요했던 사건을 모아서 정리해주어 뉴스 등을 자주 접하지 않는 사람들도 이 기능을 보면서 미디어 소식을 빠르고 쉽게 얻을 수 있도록 내용을 구성한 기능입니다.

3. 저의 UI 디자인

저는 원래부터 UI 디자인에 관심이 많았기에, 메멘토 프로젝트를 하면서 설계한 기능을 바탕으로 직접 UI 디자인도 했습니다. 본래는 프로토타이핑과 스토리보드만 적당히 설계하면 되었지만 디테일한 UI 디자인경험 삼아 함께 진행하였는데요, 그 결과는 아래와 같습니다.

전문 디자이너가 아닌 개발자였기에 완벽한 디자인이 나오진 않았지만, 나름의 고민과 함께 최대한 예쁘게 디자인해보고자 노력했는데요, 그 결과 아래와 같은 스토리보드 초안이 나오게 되었습니다.

storyboard

4. 전문 디자이너의 UI 디자인

조금 더 나은 UI를 제공하고자, 프로젝트 활동비를 바탕으로 전문 디자이너에게 외주를 맡겨 디자인 개선 작업도 진행하였습니다.

보통 디자인 외주를 맡길 땐, 기획서와 PPT 등을 이용한 프로토타이핑만 보통 전달하지만, 저희 같은 경우는 제가 직접 디자인 초안을 만들어서 디자이너에게 제공하였습니다. 이런 방식을 사용하면 몇 가지 장단점이 동시에 존재하게 되는데, 아래와 같습니다.

  • 비용이 저렴하다
  • 시간이 적게 소요되는 편이다
  • 기획자의 생각이 거의 그대로 표현된다
  • 디자이너의 생각이 잘 담기지 않는다 (더 개선될 수 있음에도 불구하고 기획자의 생각대로 굳어져버린다)

그 결과 실제로 기획안은 거의 바뀌지 않았으며, 퀄리티자체는 더 높아진 결과물을 받을 수 있었습니다. 완성본 디자인 시안은 아래와 같습니다. (왼쪽부터 메멘토 홈, 인물 매거진, 사건 매거진, 그리고 위클리 메멘토)

ui-designs

5. 비교 분석

위 둘의 디자인 시안을 보고 “아 밑에 것이 조금 더 이쁘네”, “역시 전문 디자이너는 다르다” 같은 생각이 들 겁니다. 저도 그랬고요. 다만 여기서 중요한 것은 단순히 “전문가는 다르다”로 끝나는 것이 아니라 왜 아래 시안이 더 나은지, 어떤 요소들로 인해 그렇게 느껴지는지 구체적으로 분석하는 것에 있다고 생각했고, 실제 분석 작업을 진행해 보았습니다.

모든 페이지를 분석할 순 없었기에, 전체 페이지 중 대표적인 3개의 페이지만 뽑아서 분석해 보았습니다.

인물 매거진 사건 매거진 메멘토 홈 위클리 메멘토
요약 탭 1)
타임라인 탭 2)
사진 탭
인맥 탭
요약 탭 3)
관련 사진 탭
관련 기사 탭
3줄 요약 탭
- -

1) 인물매거진 / 요약

Compare People-Magazine

Analysis People-Magazine

색상 톤 자체가 붉은 계열에서 전반적으로 차분한 색상으로 변했습니다. 페이지의 아이덴티티 색상이 하나로 통일되었으며, 사진이나 라벨의 크기와 모양이 통일되어 개선 전 페이지보다 보다 더 깔끔한 느낌을 줍니다. 직관적인 아이콘이나 배경 이미지를 활용하여 정보를 알아보기 더 쉬워졌으며, “배우”, “가수” 라벨의 위치가 이름 위로 옮겨가며 분산된 정보를 한 곳에 모아 시야가 분산되는 단점을 없앤 것으로 보입니다.

또, 개선 전 페이지에서는 강조 포인트가 너무 많던 반면, 개선 후의 페이지는 헤더의 수지 사진과 “국민 첫사랑” 문구가 가장 먼저 눈에 띄어 정보의 흐름이 자연스럽게 중요한 부분부터 부가적인 요소로 옮겨가는 효과까지 가져가는 것 같습니다.

2) 인물매거진 / 타임라인

Compare People-Magazine/Timeline

Analysis People-Magazine/Timeline

전 페이지와 같이 색상이 우선 통일되었고, 분산된 정보가 한 곳으로 모였습니다. “타임라인 바”의 경우, 원래 타일마다 다른 색상을 가져 너무 난잡했으며 불필요한 곳이 강조되는 문제가 있었는데, 이를 연한 회색 톤으로 통일하며 전체적인 통일감을 더한 것 같습니다.

또한 “사건의 등급이 표현된 라벨”의 크기가 원래 달랐는데 이를 같은 크기로 통일시켜 가독성을 높였고, 카테고리 라벨의 경우에도 색상을 통일시킴으로서 안정감을 더한 것 같습니다.

3) 사건매거진 / 요약

Compare Event-Magazine

Analysis Event-Magazine

사건 매거진 페이지에서도 비슷한 작업들이 이루어졌습니다. 헤더의 경우에는 글자 뒤에 검은색 그레데이션 배경을 주었는데, 배경 사진을 변형시키지 않고 글자의 가독성을 높이는 자연스러운 효과라고 생각됩니다.

3줄 요약” 섹션 같은 경우에는 푸른빛이 약간 도는 회색 톤 배경으로 변경되었는데, 페이지 중간쯤에 흰색과 대비되는 색상을 줌으로써 포인트를 주어 전체적인 페이지가 밋밋해 보이던 문제가 사라졌습니다. 개선 전 페이지에선 이 섹션에만 5가지 색상이 쓰이며 꽤 난잡한 문제도 있었는데, 차분한 색상으로 통일하며 세련된 느낌도 납니다.

이슈 등급” 섹션의 경우에는 본래 너무 많은 글자가 들어가 가독성이 떨어졌는데, 글자 수를 줄이고 단순한 도형 위주로 변경하여 이 문제가 해결되었습니다. “사람들의 반응” 섹션의 경우에도 감정 하나하나를 살펴보아야 전체적인 감정 파악이 되는 배치를 갖고 있었는데, 긍정/부정 키워드를 나눔으로 전체적인 감정을 한눈에 살펴볼 수 있게끔 페이지가 개선 되었습니다.

6. 결론

우의 비교 분석 작업을 보면 어떤 것들 위주로 개선이 되었는지 요약이 됩니다. 색상, 배치, 크기, 이미지의 활용 등을 주로 개선하며 몇 가지 원칙과 컨셉을 바탕으로 수정해주신 것 같네요.

“어떤 디자인이 좋은 디자인인가” 같은 글은 많습니다. 저도 페이스북에서 눈에 보일 때마다 종종 봤구요. 그런 글들을 읽으면 “아 그렇구나”, “맞아 그런 것 같네” 같은 생각이 들기는 하지만, 막상 나중에 디자인을 할 때 그 내용을 적용해서 디자인하지는 않았습니다. “나는 전문 디자이너도 아니며, 취미 삼아 하는 거야”라는 핑계 하에 체계적으로 공부하려는 시도조차 하지 않았던 것이죠.

그런 의미에서 이번 포스트를 작성하는 작업은 저에게도 꽤 의미가 있었습니다. 전문가에게 직접 디자인 강의를 듣거나 가르침을 받은 것은 아니지만, 어떤 면에서 보면 외주 작업물을 내가 디자인한 결과를 피드백한 결과로 볼 수 있으니까요.

제가 개발을 때려치우고 디자이너로 전향할 가능성은 매우 낮지만, 그래도 디자인에 대한 이해도를 높이고 공부를 하는 것은 이후에 큰 프로젝트를 할 때에도 많은 밑거름이 될 것이라 생각합니다. 그렇기 때문에 앞으로도 디자인는 공부도 계속하려 하고있고, 취미삼아 UI 디자인 작업도 꾸준히 하려고 합니다.