배달의민족을 이용하시는 분이라면 한 번쯤은 봤을 이미지.

저희는 이것을 ‘빈화면 이미지’ 또는 ‘빈화면 배달이’라고 부릅니다.

다수의 서비스에서 이런 빈화면은 정말 비어있거나, 시스템으로 들어간 짧은 문구로 안내되는 경우가 대부분인데요. 이처럼 누군가는 그냥 비워두는 곳에도 배민다움을 녹이기 위해 많은 시간을 들입니다. 앱 사용자가 이용 중 원치 않는 상황에 직면했을 때 드는 불편한 감정을 최소화하고, ‘풋’ 하거나 ‘아~’하는 감정을 느낄 수 있도록 노력하고 있어요.

오늘은 이런 빈화면에 배민다움을 녹이는 과정을 소개해 보려고 합니다. 

1. 미션: 빈화면에 배민다움 녹이기

– 배민페이 포인트가 없습니다

이 화면은 마이배민에서 배민페이 포인트를 보여주는 곳인데요. 만약 사용자에게 포인트가 없으면 포인트 내역이 없다는 메시지와 함께 이미지가 노출 됩니다.

기존에 포인트 내역 화면에 사용된 냥이 이미지는 “포인트 상세내역이 없습니다.”라는 문구를 돕기엔 ‘미안함’, ‘아쉬움’, ‘공손함’ 등 이미지가 가지고 있는 메시지의 범위가 너무 넓었어요. 그래서 해당 지면 메시지에 좀 더 착 달라붙는 직관적인 이미지 제작이 필요했어요.

키워드: 포인트, 텅, 비어있는

2. 빈화면이 채워지는 과정 (feat. 시안들)

이렇게 UI에 들어가는 그래픽의 경우엔 오랜 기간 사용하기 때문에 더 좋은 아이디어를 많이 찾기 위해서 여러명의 작업자가 배정됩니다. 이번 업무는 세 명의 디자이너가 작업자로 배정되었어요. 가장 처음엔 업무 요청 받을 때 주어졌던 ‘포인트’, ‘텅’, ‘비어있는’ 등의 키워드를 이용해 각 작업자가 자유롭게 아이디어 도출을 합니다.

1차 시안

1차 시안 작업은 완성도가 떨어지더라도 생각나는 아이디어를 최대한 그래픽으로 표현해보고 공유하는 시간입니다. 작업자가 여럿이지만 아무래도 키워드가 정해져 있다보니 그래픽이 달라도 이미지에서 전달하고자하는 메시지의 결이 비슷하게 나오는 것들이 있는데, 이 접점을 찾아서 시안 그룹을 아래처럼 나눴어요.

그룹을 나누고나면 다시보니 메시지가 애매한 이미지, 같은 그룹으로 분류했을 때 가장 직관적으로 의미 전달이 되는 이미지들이 어느정도 정해지는데요. 이 과정을 통해 디벨롭 해볼 시안들을 정하고 2차 시안을 잡아요.

이때, 가끔은 1차 공유 때 서로 나눈 피드백을 바탕으로 새로운 시안을 잡아와서 방향을 좁혀가기도 합니다.

2차 시안

2차 시안은 작업자들끼리 지난 1차 시안 중 메시지가 가장 직관적으로 전달되거나 재미있었던 시안들을 추려서 새로 분류하고 발전 시켜봤는데요.

“대체적으로 이미지가 너무 강해서 UI 요소가 보이지 않는 점이 아쉽다”, “패러디는 지양하자” 등의 피드백을 받았습니다.

2차 피드백에서 아쉬움이 있었던 이미지를 제외하고, 최종으로 이렇게 세 가지를 발전시켜 보기로 했어요.

최종 시안

기존 시안 작업에서 이미지 퀄리티는 많이 올린 상태였기 때문에 작은 디테일들을 좀 더 테스트 해봤고, 디렉터 명수님의 컨펌 결과 첫번째 보석함 이미지가 선정되었습니다.

3. 그래픽은 어떤 기준으로 확정이 될까요?

명수님(우아한형제들 CCO)의 피드백 정리

• 사용자들은 이 페이지를 액자로 보는 것이 아니라 흐름 속의 점으로 보는 것이다. 그렇기 때문에 어려운 메세지를 담기보다는 직관적으로 느껴지는 이미지로 선정하자!

• 앞의 페이지들에서 긴장감이 흐른다면 여기서는 풀어주면 좋겠다는 생각. 사용자가 페이지를 딱 봤을때 그냥 기분 좋은 느낌이길 바라는데, 보물상자가 보는 순간 전두엽이 활성화되는 느낌이 좋았다. 낡고 부정적인 인식이 있는 요소(거미, 거미줄)와 상반된 그래픽인 보물상자가 조화롭게 섞여서 좋았다. 마치 데미안허스트가 해골에 다이아몬드를 박은 것처럼 부정적인 요소에 밝은 요소가 섞여 있는 예측 안되는 엉뚱한 표현.

• 추가적으로, 이미지 하단 텍스트를 좀 더 위트있게 수정해보자 (ex 좀 더 시키면 채워질 거예요~)

4. 카피라이팅 테스트

그래픽이 확정이 되었으니 이제 카피의 시간입니다. 재미있는 메시지 후보가 나왔고, 어디에 초점을 맞출 것인가에 따라 느낌이 많이 달라질 것 같았어요.

고민했던 포인트는 두 가지였습니다. 

1. 비어있는 포인트함 이미지 자체에 초점을 맞출 것인가?

2. 사용자에게 행동을 유도하는데 초점을 맞출 것인가?

요청 부서와 논의한 결과 ‘보물’과 같은 단어들은 포인트와는 조금 동떨어졌다는 의견들이 많았고, 굳이 행동 유도까지 하는 것보다 좀 더 포괄적인 의미에서 1번: 비어있는 포인트함 이미지 자체에 초점을 맞추기로 했어요. 그렇게 최종 메시지는 ‘포인트 상자가 비어있어요’로 확정되었습니다.

최종의 최종최종까지 가는 과정.gif

어떤가요? 직관적이면서도 유쾌한가요? 

우리가 자세히 안 보고 넘어갈 수 있는 단 한 컷의 이미지가 화면에 적용되기까지 수 많은 시안이 태어났다 사라집니다. “뭘 이렇게까지 해?” 할 수도 있지만, 이렇게 사소한 부분에서까지 사용자가 좋은 경험을 하는 것이 기쁘고, 작업자에겐 즐겁게 일할 수 있는 동기부여도 됩니다.

좋은 시안 많이 잡아주신 콘텐츠와디자인팀의 김명인님과 김정민님께도 감사드리며, 앞으로도 장렬히 죽어간 좋은 시안들을 공유할 수 있는 기회가 더욱 많아지길 기대합니다.

다음에 또 만나요.(제발~)

배달이 좋아하세요? 디자이너 채용 공고 보기 >>