웹에서 링크와 떠오르는 생각을 적어 함께 저장할 수 있는 북마크 서비스를 출시했습니다. '다빈치'라는 이름의 크롬 확장 프로그램(브라우저 익스텐션(Browser extension))입니다.
잠깐, 브라우저 익스텐션이 뭐예요?
확장 프로그램(Extension) 또는 웹 브라우저 기능 확장 프로그램 또는 확장 기능은 웹 브라우저의 기존 기능의 동작을 변경하거나 완전히 새로운 기능을 추가하는 웹 브라우저용 프로그램이다. 웹 브라우저의 기본 기능에 외부 개발자가 개발한 프로그램을 추가함으로써 웹 브라우저의 맞춤화, 보안성 향상, 검색 기능 향상, 북마크 기능 추가, 번역 기능 등 웹 브라우저의 기능과 성능을 향상시킨다. 현재 크롬, 사파리, 파이어폭스 등 대표적인 웹 브라우저는 이러한 확장 프로그램을 지원하며, 독자적인 확장 프로그램 갤러리 사이트를 운영하고 있다.
- 출처: 위키백과
제가 다빈치 팀에 들어와서 시도했던 가장 첫 작업이 브라우저 익스텐션 디자인을 개선하는 것이었습니다. 다빈치 팀에 들어오기 전까지 익스텐션을 사용해 본 적도 심지어는 들어본 적도 없었습니다. 이해가 부족했던 탓인지 디자인을 개선한 버전을 배포하자마자 피드백이 들어왔습니다. 또한 출시 이후 며칠간 사용해보면서 사용성에 큰 문제가 있다는 것을 알게 되었습니다.
문제
여러 문제가 있었지만, 디자인적으로 개선할 수 있는 문제는 크게 두 가지였습니다.
1. 브라우저 익스텐션의 크기가 불필요하게 커서 웹상에서 콘텐츠를 가린다.
2. 태그 입력 시 추천 태그 창이 생기면서 저장 버튼(Save Button)을 가린다.
사용하는 데 불편함이 있다면 디자인이 예쁘더라도 그 빛을 발하지 못합니다. 팀 내에서는 문제의 디자인을 개선하기로 하였습니다. 이전까지는 예뻐 보이는 것에 집중했다면 이번에는 사용자가 얼마나 편리하게 사용할 수 있는가에 집중하기로 했습니다. 다음은 디자인 원칙들을 공부하며 배운 것을 바로 적용해보면서 더 좋은 디자인을 만들기 위해 고민했던 부분입니다.
1. 크기
이 서비스를 사용하는 목적은 웹 서핑을 하다가 저장하고 싶은 링크가 생겼을 때 노트와 함께 저장하기 위함입니다. 저는 좋은 글을 발견했을 때 떠오르는 생각을 링크와 함께 저장하고 싶어서 다빈치를 켭니다.
그런데 13인치 노트북 화면에서는 익스텐션의 크기가 커서 웹 콘텐츠의 오른쪽 위를 가리게 되더라고요. 특히 글을 읽다가 메모하고 싶어서 다빈치를 켰을 때는 오른쪽 위의 콘텐츠를 보기 위해 스크롤 하거나 다시 껐다 켜는 것을 반복해야 하는 번거로움이 있었습니다.
원래의 크기는 360*420px이었습니다. 13인치 기준으로 화면의 약 11.7%를 차지하더라고요! 확장 프로그램을 제공하는 타 서비스들과 비교해봤을 때도 확실히 크기가 큰 편이었습니다. 보통은 가로 300-330px, 세로 180-330px 정도였습니다.
그래서 전반적인 디자인을 수정하기에 앞서 가장 먼저 크기를 줄였습니다. 가로는 8의 배수인 320px로 줄이고 세로는 어떻게 구조를 짜느냐에 따라 길이가 달라질 수 있어서 미리 정하지 않았습니다.
2. 정보 정리
다음으로 들어가야 하는 정보들을 나열해보았습니다. 정보의 중요도에 따라 배치나 크기를 결정해야 하기 때문이었어요. 작은 영역 안에 생각보다 많은 정보가 있었습니다.
- Og 이미지 (링크 미리 보기 이미지)
- Favicon
- 링크 타이틀
- 링크 주소
- 노트 text area
- 태그 text area
- 저장 버튼
그리고 여기에 '공개/비공개 설정'과 '홈으로 이동' 버튼이 추가되어야 했습니다. 들어가야 하는 정보가 많아서 우선 위계를 정리해보기로 했습니다.
가장 중요한 것
- Og 이미지
- 링크 타이틀
- 노트 textarea
- 태그 textarea
- 저장버튼
다음으로 중요한 것
- 공개/비공개 설정
- 홈으로 이동 버튼
별로 안 중요한 것
- 링크 주소
- 엑스 버튼
- Favicon
여기서 '별로 안 중요한 것'은 디자인에서 제외할 수도 있음을 고려하고 설계를 시작했습니다.
3. 영역
정리한 정보에 따라 같은 위계를 가진 정보들은 비슷한 영역을 차지하거나 비슷한 강조를 가지는 것이 좋겠다고 판단했습니다.
기존 디자인을 보면 og 이미지가 크게 들어가 있고 이미지를 포함한 링크 관련 정보들이 전체의 50% 정도를 차지하고 있습니다. 단순히 이미지를 강조하는 것이 보기 좋아서 만들었는데 마치 가장 중요한 정보인 것처럼 보입니다. 사실 링크 관련 정보보다는 사용자가 입력하는 정보가 더 중요한데 말이죠! 따라서 위에 정리했던 정보들을 토대로 영역을 다시 구분해 보았습니다.
이제 링크 관련 정보가 차지하는 영역보다 사용자가 입력하는 정보의 영역이 더 넓게 차지하게 되었습니다! 시각적으로도 왼쪽은 이미지에 눈이 가는 반면 오른쪽은 노트나 태그에 가장 먼저 눈이 갑니다 :)
4. 강조
기본 폰트 사이즈는 16px입니다. 따라서 더 중요한 정보는 더 큰 폰트 사이즈로, 덜 중요한 정보는 더 작은 폰트 사이즈로 디자인했습니다. 예를 들어 '링크 타이틀'의 경우에는 20px, '링크 주소'의 경우에는 14px를 사용했습니다. 여기에 링크 주소는 상대적으로 사용자가 덜 주의해야 할 정보라고 생각되어 gray로 색을 낮추어 강조를 피했습니다.
기존 디자인에는 '공개/비공개 설정'이 따로 없었으나 서비스에 커뮤니티가 생겨 공개 설정 기능이 추가되었습니다. 공개/비공개 설정은 사용자가 민감하게 반응할 수 있는 정보이기에 놓치는 정보가 되지 않도록 색을 입히고 아이콘을 추가하였습니다. 한 눈으로 봐도 'Public(전체공개)'인지 'Only me(나만 보기)'인지 파악하기 쉽게 만들었습니다.
5. 배치
링크와 관련된 정보, 노트 및 태그와 관련된 정보, 그 밖의 정보(홈으로 이동/X 버튼)를 적절히 배치하기 위해 고민했습니다. 정보를 그룹으로 묶어보니 배치를 하기가 한결 수월했습니다.
특히 이전과 같은 실수를 반복하지 않기 위해 태그와 저장 버튼의 위치에 신경 썼습니다. 저장 버튼이 아래 있으면 태그로 가려질 가능성이 크기 때문에 위쪽 또는 오른쪽으로 배치해야 했습니다. 사용자 시나리오를 고려했을 때 (1) 노트 작성 (2) 태그 작성 (3) 이후에 저장 버튼 클릭으로 이어지기 때문에 위쪽보다는 태그 오른쪽에 배치하는 것이 좋아 보였습니다.
Home(홈으로 이동) 버튼의 위치가 가장 애매했습니다. 사실 없어도 되는 기능이지만 확장 프로그램에 익숙하지 않은 사용자를 위해 익스텐션에 포함하기로 한 것이었어요. 일단 아래쪽과 위쪽에 각각 배치해보았습니다. 아래쪽보다는 위쪽에 배치하는 것이 시각적으로도 안정감이 있고 X 버튼을 오른쪽에 추가할 수도 있어서 선택하게 되었습니다.
디자인을 마무리하면서 디자인할 때는 여러 가지 사용자 시나리오를 생각하며 구성해야 한다는 것을 배웠습니다. 이 작은 영역 안에서도 생각해야 할 것들이 꽤 많더라고요! 이번에 개선한 디자인도 사용하다 보면 또 불편한 점이 생길지도 모릅니다. 사실 직접 사용해보기 전까지는 어떤 문제들이 있을지 모른다고 생각해요. 하지만 확실히 이전 디자인보다는 사용성이 좋아졌다는 것을 느끼고 있습니다. 다음에 또 개선해야 한다면 그때는 지금보다 더 좋은 디자인으로 사용자와 만나고 싶습니다 :)
'비전공자 디자인' 카테고리의 다른 글
| UXUI 디자인에 심리학 법칙 적용해보기 _ 제이콥의 법칙 (0) | 2021.02.22 |
|---|---|
| 디자이너가 추천하는 컬러 추출 사이트 (6) | 2021.02.19 |
| 앱 아이콘 크기 어떻게 정하면 될까? (3) | 2021.02.16 |
댓글