앱 서비스 디자인
서비스 디자인 진행 과정
디자이너로서 디자인에 관련된 이야기를 쓰는 건 처음이라 많이 쑥스럽기도 하고 조심스러운데요. 그래도 사이드 프로젝트로 앱을 어떻게 만들어야 할 지 아예 감이 안 잡혔던 분들을 위해 수명 카운트다운 서비스를 디자인했던 과정을 간략하게 이야기해볼까 합니다.
저는 현재 회사에 입사한 이후로 한 가지 서비스만 디자인하고 있는데요. 서비스를 오래 운영하다보니 가이드화된 UI와 기준이 되는 브랜드 컬러를 주로 사용하게 되었죠. 그래서 이번 사이드 프로젝트에서는 기존에 사용했던 스타일만 사용하지 않는다면 새로운 스타일에 도전해고픈 디자이너로서의 갈증이 조금이라도 해소될 것 같다는 생각이 들었습니다.
여기에 더불어 수명 카운트다운 서비스의 컨셉을 명확하게 드러낼 수 있는 '디자인 컨셉'도 중요했는데요. 화면을 구성하는 요소가 심플하고, 어떤 것을 강조해야할지 비교적 명확하기 때문에 다행히도 컨셉을 잡는 과정이 오래 걸리지 않았습니다. 서비스 구체화 과정 및 와이어프레임을 다룬 편에서 미리 보셨겠지만, 카운트다운 넘버링을 볼드하게 강조하고 오늘의 문구가 서브 레벨로 보이는 정도의 구성을 생각하였습니다. 비주얼 컨셉은 생각했던 화면 구성에 따라 어울릴만한 스타일을 리서치하면서 정리하기로 했죠.
스타일 리서치
컨셉 A. 그래프 강조 스타일
카운트다운을 좀 더 직관적으로 보여주기 위해 이미 사용한 수명과 남은 수명을 그래프로 보여주면 어떨까요? 숫자만으로 구성되어 있는 것보다 시각 요소인 그래프를 활용하면 생각하는 과정을 한 번 더 줄여줄 수 있지 않을까하는 생각이 들었습니다.
컨셉 B. 볼드하고 심플한 스타일
메인화면에서 크게 두 가지 컴포넌트 밖에 없기 때문에 아예 강약의 차이를 제대로 줘서 어떤 걸 먼저 봐야할 지 시각적으로 강조해주면 어떨까 하는 생각도 해보았습니다. 다른 컨셉들보다 비교적 더 컨셉추얼해서 디자인을 풀어가는 과정이 상대적으로 좀 더 쉽지 않을까 하는 생각도 들었구요.
컨셉 C. 빈티지한 톤의 그래픽 스타일
삶의 소중함을 리마인드 시켜주는 서비스의 컨셉에 맞게 컬러와 그래픽의 톤앤매너를 부드럽고 따뜻한 느낌의 빈티지한 톤으로 적용하면 어떨까 싶었죠. '그린예'이라는 컬러를 예로 들면, 같은 그린을 사용하더라도 채도가 높은 쨍한 그린보다 오랜시간 사용한 듯한 약간 빛이 바랜 그린을 사용하여 좀 더 따뜻한 느낌을 강조하는 방향을 생각하였습니다. 거기에 약간 몽글몽글한 그래픽이 더해진다면 서비스의 의도와 비주얼 컨셉도 어느정도 일치하지 않을까요?
위처럼 각 컨셉마다 표현할 수 있는 장점이 각기 달랐는데요. 같이 서비스를 만드는 프로젝트 멤버들의 의견을 받아 전체적인 톤앤매너는 빈티지한 톤(컨셉 C)으로, 그래픽 스타일은 넘버링을 강조한 볼드한 스타일(컨셉 B)로 진행하게 되었습니다.
디자인
사용자 후킹을 위한 기능 중 하나로 테마 기능을 말씀드렸는데요. 테마 선택에 따라 자동으로 컴포넌트가 테마에 맞는 컬러로 변환되게 만들어두었고, 이에 따라 각 테마에 알맞는 컬러를 지정하게 되었습니다. 컬러를 지정할 때 어떤 성격의 컬러가 어디로 들어갈 지 정의하기 위해 Primary-Secondary-Tertiary 레벨을 임의로 지정하여 각 컬러 레벨에 맞는 컬러 코드를 클라이언트 개발자 분께 전달드렸습니다.
위의 테마 컬러 키 값을 정의한대로 적용하게 되면 아래와 같이 테마별 컬러가 자동으로 지정됩니다.
근데 '넘버링 + 오늘의 문구 + 테마 컬러' 말고는 아무래도 아쉬운 느낌이 들어 약간의 그래픽 요소를 추가하는 게 어떨까 생각하게 되었는데요. 그게 바로 오늘의 문구 좌상단에 있는 굼벵이 친구 두 명입니다. 굼벵이 친구들의 디벨롭 과정은 기록이 제대로 남지 않아 아쉽게도 마지막 버전만 남아 있네요.
이것도 그래픽만으로는 약간 아쉬운 느낌이 들어 작은 움직임으로 지루함을 더는 쪽으로 디벨롭을 진행하였습니다. 완만한 형태의 느리게 사는 굼벵이 친구들 두 명(?)이 졸고 있는 친구를 깨우고 함께 정신 차리는(??) 내용으로, 서비스의 컨셉에 최대한 부합하도록 스토리텔링을 구성하고 애니메이션을 디자인하게 되었습니다.
리소스가 조금 더 있었다면 테마별로 애니메이션 내용이 다르게 노출되거나, 혹은 2~3종의 애니메이션이 랜덤으로 노출되는 방식도 좋았겠다는 아쉬움이 있지만, 그래도 자칫 심심하게 마무리될 수 있던 화면에 약간의 움직임을 줘서 지루함을 덜 수 있는 장치를 마련했다는 것에 위안을 삼아 봅니다.
