[아티클] 첫 화면으로 사로잡아라

2019년 03월 cracker.live에서 작성한 글입니다.

첫인상은 강렬하다

우리는 누군가를 처음 만날 때 그 사람에 대한 '첫' 이미지를 정의한다. 그리고 짧은 순간 동안 보고 느낀 인상을 그 사람이 어떤 사람인지를 판단하는 기준으로 사용하곤 한다. 첫 인상을 바꾸기 위해서는 그것보다 200배 이상 강렬한 인상이 필요하다고 한다. 그렇기에 첫 인상은 강렬하고 오래간다.

 

" 좋은 첫인상을 남길 수 있는 기회란 결코 두번 다시 오지 않는다."
-디오도어 루빈-

 

정신분석가인 디오도어 루빈은 좋은 첫 인상을 남기는 것을 '기회'라고 표현했다. 기회는 한번 뿐, 약 0.1초의 찰나의 시간동안 우리는 상대에게 좋은 인상을 남겨야 한다.

 

인상은 사람이나 사물만의 것이 아니다. 우리 주변의 서비스 역시 좋은 첫인상이 필요하다. 고객을 사로잡을 만한 그런 인상 말이다! 주로 로고나 브랜딩을 통해 그 이미지를 파악하기도 하는데, 그 서비스가 온라인에서 진행된다면 특히나 '첫 화면'를 통해 그 서비스에 대한 '첫'이미지를 정의하게 된다.

 

구글web의 *랜딩페이지 / 구글App의 첫 화면

*랜딩페이지 : 검색엔진, 광고 등을 경유하여 접속하는 사람이 처음으로 보게 되는 웹페이지 

 

---

 

10년 전까지만해도 웹페이지의 *랜딩 페이지 가 서비스의 첫인상에 중요한 역할을 했다면, 점차 모바일화되며 앱의 첫 화면(메인 페이지/홈 화면)이 그 서비스를 나타내는 중요한 역할을 한다.

 

그렇다면 좋은 첫 인상을 위한 앱 서비스의 특징은 무엇일까?

1. 서비스의 특징과 가치를 보여줘야 한다.
2. 서비스 이용 방법을 파악할 수 있어야 한다.

 

이러한 것을 잘 보여주고 있는 한국의 대표적인 유니콘기업 중 앱서비스를 제공하고 있는 3개 업체를 파헤쳐 보자.

 

 

 

한국의 유니콘 서비스 3가지 (가나다순)

이름만 들어도 우리들은 이 서비스가 무엇인지 안다. 투자나 기타 정보 등이 궁금하다면 링크를 확인해 보자

 

토스 / 배달의 민족 / 쿠팡 (출처 : Cracker.live)

 

• 비바리퍼블리카 (Toss) https://www.crunchbase.com/organization/viva-republica#section-overview
• 우아한 형제들 (배달의 민족) https://www.crunchbase.com/organization/woowa-bros
• (주)쿠팡 (쿠팡) https://www.crunchbase.com/organization/coupang#section-overview

---

첫 화면 법칙

첫화면 법칙의 기준은 'UX디자인 프로젝트 가이드2' 서적을 참고했다.

 

1. 비주얼 : 주인공이 누구야? ㅣ 서열과 장악력
2. 인터렉션 : 오프라인과 유사한 디지털 세계 ㅣ 연상(Association)과 행동유도성(Affordance) 그리고 피드백
3. 심리학 : 좋은 디자인의 긍정적인 효과 ㅣ 매력적인 디자인 효과

 

01. 비주얼 : 주인공이 누구야?

서열과 장악력

"이 서비스의 주인공이 누구야!!"

내가 본 소설, 드라마, 영화에는 꼭 등장하는 인물이 있다. 바로 '주인공'이다. 주인공은 주체가 되어 이야기를 풀어 나간다. 그리고 언제나 눈에 띈다. 이 작은 휴대폰 속 서비스에도 눈에 띄는 주인공이 있다. 아마 그것은 서비스의 핵심 기능이여서 사용자들이 즐겨 찾는 메뉴일 것이다. 프로덕트 디자이너들은 정보의 우선순위를 따져 주인공을 정한다. 이것을 서열이라 말하는데, 화면에 보이는 요소의 정해진 순서를 의미한다. 서열이 높을 수록 눈에 띄고 도드라져 보인다.

쿠팡은 어떨까? 먼저 광고 베너를 통해 기획전이나 이벤트를 강조해 알려주고 있다. 첫 유입 유저를 구매까지 이끌기 위한 마케팅 요소이기 때문이기에 명령형 어투와 긴급함을 드러내는 구두법, 시선을 집중시키는 이미지를 사용해 가장 두드러져 보이고 페이지를 장악하고 있다. 그 외의 부분은 쿠팡의 메인 서비스인 ‘로켓배송’과 유사하게 빠르고 간편한 쇼핑을 돕는 첫 화면의 구성을 갖고 있다.

원하는 물건을 빠르게 탐색할 수 있는 ‘검색’기능을 가장 상단에 위치시켰다. 또한 사용자(소비자)를 위한 맞춤형 서비스를 강조했다. 자주 구매하거나 최근 본 상품과 연관된 상품을 추천해 줌으로써 효율적인 쇼핑에 큰 도움을 준다. 또한 관심 카테고리를 설정하여 상품을 추천 받을 수 있는데 이러한 화면 구성은 사용자를 흥미롭게 하고 구매를 이끈다.

쿠팡과 달리 배달의 민족은 검색 바를 상단에 두지 않았다. 카테고리를 먼저 보여주고 그중 선택을 못했을 때 검색을 할 수 있도록 검색 바를 배치시켰다. 우선 순위는 절대적이지 않다. 그렇기 때문에 UX/UI를 기획할 때 먼저 앱 서비스의 특징을 잘 고려해 우선순위를 정리해 보자.

 

---

2. 인터렉션 : 오프라인과 유사한 디지털 세계

연상(Association)과 행동유도성(Affordance) 그리고 피드백

디터람스가 디자인한 브라운 계산기(출처: amazon.com ) / 아이폰 계산기

위 두 계산기는 왠지 모르게 닮았다. 실제로 애플사의 CDO(최고 디자인 책임자)인 조나단 아이브(Jonathan Ive)는 자신의 영감은 디터 람스로 부터 온다고 했다. 애플사의 아이팟, 아이폰 등과 그 속의 UI는 디터 람스의 디자인을 승계했다고 볼수 있을 만큼 유사하다. 처음 아이폰 계산기 앱을 사용할 때 굉장히 익숙하게 사용할 수 있었는데, 그 이유는 실제 계산기의 모습이 연상(Association)되 어떻게 사용하는 것인지를 파악(행동유도성/Affordance)할 수 있었기 때문이다.

 

• 연상 (Association) : 한 사물의 심성을 다른 사물에 투영해 새로운 심상을 불러일으키는 것.(출처:위키백과)
• 행동유도성 (Affordance) : 사물의 속성을 통해 그것이 어떻게 사용하는 지를 파악할 수 있는 것.

토스는 연상과 행동유도성을 적극적으로 첫 화면에 반영했다. 토스의 ‘첫’화면은 ‘계산기’와 ‘전화 키패드’가 연상된다. 신기한 것은 공통적으로 누를 수 있는 ‘숫자’ 버튼과 연관돼 있다는 것이다. 이런 모양새 덕분에 송금을 위해서라면 이 첫 화면의 키패드를 이용하면 된다는 것을 빠르게 알아 차릴 수 있다.

여기에서 그치는 것이 아니라, 사용자가 맞게 사용하고 있다는 것을 즉각적인 반응을 통해 알려 준다. 숫자를 누르자 하단 탭바가 사라지고 ‘더치페이’와 ‘송금하기’버튼이 등장하는데 이러한 피드백은 올바른 테스크를 수행할 수 있도록 유도해 준다. 사실 토스의 메인 화면은 ‘허전’하다고 느낄 수 도 있다. 하지만 실제 사물을 연상 시키는 UI의 구성과 즉각적인 피드백(반응)이 있기에 고민없이 사용할 수 있었고 이 편리한 경험은 토스 서비스에 대한 만족감으로 풍부해져 간다.

---

3. 심리학 : 좋은 디자인의 긍정적인 효과

매력적인 디자인 효과

여기까지는 주로 심미적인 것과 움직임, 즉 디자인의 인지적이고 기계적인 측면에 초점을 맞췄다. 그러나 UX/UI 디자인에서 정말 매력적인 부분은 사용자가 제품이나 경험에 이끌리는 그리고 몰입하게 되는 심리를 이해하는 데 있다.

 

‘UX디자인 프로젝트 가이드2’ 서적에서는 심리를 이용하는 3가지 법칙을 제안했다.

1. 매력적인 디자인의 감정적인 효과
2. 플로우와 게임화 원칙 : 제품에서 새로운 도전을 감행하는 동기를 자극하는 심리적 요소
3. 소셜 프루프(Social Proof) : 타인들의 의견이 사용자 결정에 미치는 영향

---

플로우와 게임화 원칙은 주로 회원 등급이나 미션을 통한 혜택 등으로 이용한다. 이를 통해 사용자들이 더 활발히 앱을 이용할 수 있도록 하는 심리적 방식이다. '소셜 프루프(Social Proof)'는 '사용 후기'로 이해하면 편한데 다른 사람들의 목소리가 사용자의 결정에 영향을 미친다는 의미이다. 애어비앤비에서는 첫 화면에서 숙소에 대한 후기와 호스트 등급을 노출시키는 '소셜 프루프'를 이용했다. 그렇다면 '매력적인 디자인의 감정적인 효과'란 무엇 일까?

 

UX의 창시자 도널드 노먼은 '이모셔널 디자인(Emotional Design)'에서 제품의 종류와 상관없이 디자인의 감성적인 측면을 고려해야 한다는 주장을 했다.

배달의 민족은 특별한 아이콘을 사용하고 있는데, 그 모습이 배달의 민족이 이벤트로 나눠 주던 음식 벳지와 매우 유사하다. 뱃지스타일의 아이콘은 일반적인 아이콘과 달리 ‘배민다움’을 보여주며 심리적 만족감을 준다. 또한 배달의 민족은 조금 더 매력적인 서비스를 위하여 직접 배달 음식 사진을 찍었다. 통일성이 느껴지고 먹음직스러운 사진을 통해 어느 전단지와는 다르게 더 깔끔한 인상을 주고 신뢰감을 준다. 사람들은 매력적인 디자인을 더 사용하기 쉽고 신뢰가 간다고 여긴다. 이제는 매력적인 디자인도 사용자 경험의 일부가 됐다. 사용자가 재방문하고 즐길 수 있는 서비스가 되기 위해서 미와 사용성. 이 두가지를 놓치지 말자.

---

UI/UX 공부를 할 때 스토어에 있는 앱을 깔아서 탐구하곤 했다. 수백 개의 앱 중에 모두 살펴보고 나면 몇 개 남아있지 않았다. 삭제의 1순위가 된 앱들은 그저 다른 서비스의 UI를 ‘카피’한 앱이 였다. 내가 느낀 ‘진짜’ 앱은 독창적이라고 할 수는 없었다. 그렇지만 첫 화면에서 서비스의 특징이 너무 잘 드러났다. 앱 서비스의 첫 화면은 그 서비스의 얼굴이다. 그렇기 때문에 서비스에 대한 깊은 이해를 기반으로 화면이 구성 되기를 바란다.

 

---

 

첫 화면은 서비스를 알려야 하는 초기 스타트업에게 더욱 더 중요한 요소다. 서비스에 대해 답할 수 있는 첫 화면으로 사용자에게 좋은 첫인상을 남겨 보자. 기회는 한번 뿐, 약 0.1초의 찰나의 시간동안 사용자에게 좋은 인상을 남겨라.

Cracker의 첫번째 디자인 글입니다. Tra는 더 좋은 글로 돌아오겠습니다.

 

 

 

Cracker.Live Contents Creator, 정지현 (@Tra)

Cracker.live

 

 

---