brunch

매거진 어바웃 어플리케이션

라이킷 104 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 한상훈 Jun 20. 2019

웹사이트는 이렇게 만드세요.

사용자를 우선하는 UX/UI 디자인과 스토리텔링

1. 스토리텔링

노트북을 펴고 친구에게 보여주면서 이야기한다고 생각해보세요.

랜딩 사이트를 만들어야 한다면 반드시 좋은 스토리텔링을 구상해야 합니다. 랜딩 사이트의 목적은 소개를 위한 웹사이트라는 점을 기억하세요. 사이트 방문자를 이 서비스에 아무 지식이 없는 사람이라고 가정하세요. 웹사이트를 만드는게 아니라 친구에게 이야기를 한다고 생각해보세요.

- 쉬운 이야기에서 어려운 이야기로 진행하세요.

- 가벼운 이야기에서 무거운 이야기로 진행하세요.

- 사전이 아닌 동화책을 만든다고 생각하세요.

2. 인터렉션

몇몇의 사이트들은 신기한 인터렉션으로 사용자들을 현혹시킵니다. 사용자는 '오 멋진데?'하면서 마우스를 스크롤하고, 클릭을 해보곤 합니다. 하지만 결국 어떤가요? 인터렉션만 휙휙 경험해보고, 대부분 떠나게 됩니다. 많은 인터렉션이 존재하는 웹사이트는 겉멋은 있지만 목적 달성에는 적합하지 않을 수 있습니다.

- 대부분의 경우 간단한 애니메이션 효과로 충분합니다.

- 인터렉션이 고민된다면 라이브러리를 사용하세요.

3. 너무 쿨하지 않기

최신 웹디자인 트렌드가 독이 될 수 있습니다. 익숙하지 않은 최신 디자인은 불필요한 진입장벽을 만듭니다. 쿨해보이지만 사용성이 불편한 경우도 많습니다. 그렇기 때문에 여전히 단순하고, 투박해보이는 사이트들이 가장 잘 나가고 있습니다.

멋은 있지만 사용하기엔 정말 편리할까?

- 최신 웹디자인을 참고하기 보단 많은 사람들이 사용하는 서비스를 참고하세요.

- 사용성을 높히고, 리텐션을 높여야 하는 사이트라면 오래된 디자인을 사용하세요.

- 채도가 높은 색상은 주의를 분산시켜 웹사이트의 목적을 방해할 수 있습니다.

4. 최소 버튼

버튼은 적어야 합니다. 많은 선택지는 핵심 행동을 이끌어내는데 방해되고, 주의를 분산시킵니다. 컨텐츠 기반 웹사이트라면 컨텐츠는 반복적으로 구성되어야 합니다. 이는 사용자가 웹사이트를 이해하기 쉽게 만들어주고, 혼란을 줄여줍니다.

- 버튼을 없애세요.

- 핵심적인 행동이 아닌 행동은 되도록 푸터(Footer)에서 처리하세요.

5. 원클릭

클릭, 입력, 작성 등의 행동을 하나의 에너지라고 생각해보세요. 우린 사용자의 한정된 인내심을 클릭에 소모시키고 있습니다. 웹사이트의 핵심 행동을 하기까지 클릭이 몇 번 필요한지 계산하세요. 잘 설계된 웹사이트는 클릭 1~2회로 핵심 컨텐츠에 접근할 수 있어야 합니다.

- 컨텐츠까지 원클릭 이내로 설계하세요.

- 체크박스, 입력 등을 최소화하세요.

6. 모바일

많은 웹사이트는 모바일 접속자가 70~80%정도 됩니다. 모바일에서 고려할 사항은 무엇일까요?

히트존을 생각하고 디자인하기

- 버튼이 손가락이 누를만큼 커야합니다.

- 버튼은 스마트폰의 상단보다 하단에 있을때 누르기 좋습니다.

- 화면의 절반 이상을 차지하는 텍스트가 있다면 없애세요.

7. 중요도

웹사이트에서 무엇을 중요시할건지 정하세요. 사람들이 계속 찾게 만들어야 한다면(높은 리텐션), 컨텐츠가 지속적으로 추가되야 합니다. 반면 랜딩 사이트라면 낮은 리텐션이어도 상관없으니 아름답고 핵심 행동을 이끌어낼 메시지가 있어야 합니다. 기회는 한 번 뿐이니까요.

- 리텐션을 높이려면 방문할 때마다 새로운 컨텐츠를 볼 수 있어야 합니다.

- 리텐션을 높이는 좋은 방법은 알림입니다.

8. 바뀌지 않는 부분

들어올 때마다 많은 부분이 바뀌는 사이트는 혼란을 줍니다. 특히 리텐션이 높은 서비스일수록 작은 변화가 큰 사용자 이탈을 만들곤 합니다. 익숙함을 깨지 않는 범위에서 수정이 이뤄져야합니다. 전체 레이아웃과 플로우까지 수정되는 경우는 위험한 결과를 초래하기도 합니다.

스냅챗 리디자인 후 상황

- 바뀔 수 있는 페이지와 바꾸면 안되는 페이지가 있습니다.

- 리디자인은 리텐션을 확 떨어뜨릴 수 있습니다.

9. 룰 따르기

불필요한 혁신은 별로 좋지 않아보입니다. 특정한 메시지를 전달하려는게 아니라면 보편적인 룰과 사이트맵 디자인을 따르세요. 사이트맵을 설계하고, 보편적인 웹사이트로 만드는 것만해도 어려운 일입니다.

- 보편적인 디자인은 실패하기 힘든 디자인이기도 합니다.

- 보편성은 사용자가 웹사이트를 돌아다니면서 많은 정보를 찾기 쉬워집니다.

- 사용자를 오래 머물게 하는 사이트는 대단한 겁니다.

10. 플로우

구글 애널리틱스나 웹 분석도구를 통해서 사용자의 플로우를 확인할 수 있습니다. 플로우 분석을 할 때 가장 중요한 점은 핵심 행동까지 가는 과정에서 발생한 페이지 이탈율입니다.

- 페이지 이탈율을 통해 어떤 페이지가 사용자에게 불편함을 주는지 확인하세요.

- 각각의 페이지에서 보낸 시간이 얼마인지, 클릭은 얼마나 하는지 확인해보세요.

- 히트존을 파악하는 도구를 사용하는 것도 좋습니다.

11. 이미지 최적화

JPG, PNG를 사용하시죠? 아직까진 많이 사용했지만 이젠 웹에 최적화된 이미지 포맷이 아닙니다. 더 최적화된 친구들이 나왔기 때문이죠. JPEG 2000, Webp, JPEG XR 같은 이미지 포맷을 사용해보세요. 브라우저 호환성 이슈를 잡기 위해서 프론트엔드 작업이 필요할 순 있지만 매우 적은 용량으로 동일한 이미지를 보여줄 수 있습니다.

- 최신 이미지 파일 포멧을 사용하세요.

- 이를 위한 HTML 태그 수정을 함께 진행해주세요.

- 할 수 있다면 아이콘은 스프라이트 이미지로 합쳐서 가져오세요.