이 앱은 왜 이렇게 생겼어요?
닷닷 아카이빙 #9 신규 앱 디자인 컨셉 도출기
안녕하세요, 디자이너 YY입니다. 이번 글에서는 현재 개발 중인 앱의 디자인 컨셉을 풀어나가는 과정을 소개해 드리고자 해요. 팀 닷닷이 새롭게 보여드릴 앱의 이름은 ‘임프루브(Improoove)’랍니다! 앱의 핵심 기능이 정의되고 난 후, 저는 앱의 디자인 아이덴티티를 고민하기 시작했어요. 대학생 및 사회초년생을 대상으로 1) 회고와 단상을 기록하고, 2) 타인의 피드백을 받는 서비스를 만들고자 했기에 - 저의 머릿속에 가장 먼저 떠오르는 키워드는 ‘성장’이었답니다. 디자인 컨셉 도출 아이디에이션 과정은 다음과 같아요.
먼저, 메타포를 설정해 앱이 전달하고자 하는 메시지를 담습니다. 이 과정에서 룩앤필(Look and Feel)을 설정한 후에 이를 서비스에 녹여내서 디자인합니다.
메타포에 기반한 컨셉 설정
정제되지 않은 언어더라도 머릿속에서 떠오르는 단어들을 우선 쭉쭉 적어 내려 갑니다.
‘성장’이라는 키워드에 파생해서 ‘덕지덕지 덧대는 조각보’, ‘단상들이 모여 큰 그림을 만드는 점묘화’ 등… 다양하게 메타포로 활용될 수 있는 시각 언어들을 떠올렸어요.
한가지 팁을 말씀드리자면 저는 주로 피그마의 FigJam을 통해서 작업을 하는데요, 이미지를 첨부하기 쉽고 보드를 팀원에게 공유해서 투표하기 편리해서 자주 이용한답니다.
최종 디자인 메타포최종적으로 ‘쌓다(Stack)’과 ‘밝게하다(Lighten)’라는 메타포를 결합해서 앱의 메시지를 전달하고자 했습니다. 성찰과 영감을 포함한 단상들을 기록하며 스스로의 내공을 쌓아가고, ‘나, 잘하고 있니?’라고 자문하며 많은 것을 소화해야 하는 시기를 겪는 사회초년생에게 성장에 대한 희망찬 메시지를 담고 싶었어요. 이러한 의도를 담아 앱의 UI 배경은 어둡게 처리하고, 사용자가 작성해나가는 기록의 부산물이 더 멋지고 빛나게 느껴지도록 했답니다.
컨셉 디자인 구체화
디자인 메타포를 선정한 뒤에는, 이리저리 상상하고 짱구를 굴려가며 스케치했답니다.
Stack
Stack의 형태를 구상하면서는 ‘기록과 피드백을 받는 앱’의 기능적 편의를 감안해서 리스트형, 그리드형, 카드스택 형태 등등을 떠올려 보았어요. 글에서 보여드린것들 보다 더 많은 스케치를 진행했습니다. 체감상 많이 그려볼 수록, 더 나은 좋은 아이디어가 나오니 많이 그려보시는 걸 추천 드려요. (TMI. 쌓여있는 종이 더미를 휘리릭 넘기는 듯한 과감한 모션이 담긴 형태도 시도해보고 싶었었지만.. 개발과 디자인 난이도를 감안해서 생략했어요)
Lighten
Lighten의 경우, 어떤 방식으로 표현할지 고민을 가장 많이 했답니다. 우선 어두운 배경과 대비될 수 있도록 고채도-고명도의 색상을 사용해서 다이내믹한 인상을 주고자 했어요. 사용자가 각자의 취향에 따라 색상을 선택할 수 있도록 한색과 난색을 골고루 적용해서 컬러 팔레트를 구성했답니다. 나아가 웹 접근성 평가센터(WCAG, Web Content Accessibility Guidelines)의 접근성 검사에서 AA기준을 통과하는 색상들로 배치했어요. 이는 기능적인 관점에서 색상 위에 텍스트를 얹혀도 가독성에 문제가 없어야 하기 때문입니다.
서비스에 적용하기
이제 어느 정도 룩앤필이 결정되었으니, 본격적으로 앱에 디자인을 묻어내는 일이 남았습니다. 아직 디자인이 진행 중이긴 하지만, 간략하게 어떻게 디자인 컨셉을 녹여냈는지 소개해 드릴게요. 손이 닿는 모든 작업물은 컨셉을 염두에 두며 디자인해서 전체적인 일관성을 유지하고자 했습니다.
두근두근... 신규 앱이 기대되시나요?
올해 초를 목표로 서비스는 오픈 예정이니, 많은 관심 부탁드려요. 팀 닷닷은 그동안 더 좋은 서비스 보여드리기 위해 노력하고 있겠습니다. 마지막 사진은 최근에 개설한 신규 앱의 인스타그램 계정인데요, 본격적인 앱 출시에 앞서 미리 서비스를 사용해볼 수 있도록 해놓았습니다. 많이 보러 와주세요~~
지금까지 긴 글 읽어주셔서 감사합니다. 다음에는 더 좋은 글로 찾아오겠습니다!
