brunch

라이킷 28 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 일리 Dec 17. 2021

사이드 프로젝트 회고록 - 타임스페이스(하)

앱 서비스 '타임스페이스' 제작기

들어가기 전에

원래는 (상) 편을 작성한 뒤 바로 일주일 뒤에 (하) 편을 발행할 계획이었는데(...) 정확히 4달 만에 글을 적게 되었네요. 흑흑. 앞서 다룬 내용을 못 보셨던 분들은 프로젝트의 전반적인 과정 이해를 돕기 위해 사이드 프로젝트 회고록 - 타임스페이스(상)을 참고 부탁드립니다.

지난 회차의 아이디어 스케치 및 기획에 이어 - 디자인 콘셉트를 포함한 디벨롭 과정과 최종 결과물, 출시 이후 간단한 지표, 느낀 점 등을 이야기하며 마무리하겠습니다.

<만든 이>

Designer : 이도후, 김설아

front-End/back-End Developer : 강환석

7. 디자인 콘셉트

서비스 내 디자인 콘셉트 설정하기

서비스의 지향점에서 실제 시안에 반영할 디자인 콘셉트를 추출하는 과정을 거쳤습니다. 구체적으로 손에 잡힐 수 있는 단어일수록 결과물을 만드는 과정이 좀 더 수월해질 수 있습니다. 다시 돌아보니 서비스의 특징이 다소 광범위한 느낌이 드는 아쉬움이 남네요.

8. 무드보드 & 컬러

우주의 신비로움과 고요함

핵심 배경이 명확해서 색상을 선정하는데 큰 어려움은 없었습니다. 우주를 참고해서 배경은 네이비로, 메인 컬러는 보라 계열을 중심으로 채도가 적정 선에서 어우러질 수 있게 조정했어요. 비교적 긴 시간을 거쳐 열 수 있는 캡슐의 갯수가 더 많을거라 추측했는데, 해제 조건을 달성했을 땐 그라데이션, 해제 이후엔 하늘색으로 달리 적용했습니다. '캡슐 해제'는 비교적 흔하지 않은 이벤트라, 유저에게 특별한 순간을 좀 더 강조하고 싶었습니다.

Color System(Background - Primary - Secondary - Point)

9. 로고 & 런처 아이콘

타임스페이스 워드마크 로고

FUTURA 서체를 근간으로 끝 부분을 라운드로 변형하고, E에서 뻗어 나오는 획을 움직이는 유성으로 표현했습니다. 하루에도 수많은 앱이 쏟아져 나오는 앱스토어 시장에서 살아남기 위해(?) 아이덴티티를 바탕으로 강렬한 그래픽 일러스트를 넣었습니다. 우주의 감성적이고 신비로운 연상 이미지를 잘 담아낼 수 있게 노력했습니다.

그래픽 일러스트를 담은 타임스페이스 앱 아이콘

10. 타이포그래피

미래에 대한 희망과 발상, FUTURA

부끄럽게도 많은 서체를 활용함에도 불구하고 정작 서체가 가진 배경에는 썩 관심이 없었습니다. 프로젝트를 하던 와중에 FUTURA의 역사에 대해 좀 더 자세히 알 수 있었는데요. 우주선 내 계기판, 안전계획서, 운항 보조장비 및 시스템 도표, 그리고 우주 비행사가 서비스 장치를 다루는 모든 인터페이스에 적용된 사례가 있습니다.

미국의 연구원이자 저널리스트인 더글러스 토마스(Douglas Thomas)는 실제 달에 있는 타이포그래피가 타당성과 권위를 반영하며 우주비행사들이 달에 가기 위한 힘이 되었다고 말합니다. 미래에 대한 희망과 발상을 암시하는 서체의 특성 때문에 오늘날에도 패션, 운동 등 많은 산업분야에서 채택되어 사용되고 있습니다.

참고: TED 영상, <FUTURA 서체가 아폴로 11호의 달 착륙에 미친 영향>
https://www.youtube.com/watch?v=PUW89NpDYJw&ab_channel=TED

하지만... FUTURA는 유료 라이센스였고, 특히 인앱에 들어갈 경우 최소 수십만 원 이상의 비용을 지불해야 해서 가장 유사한 서체 중 하나인 ‘POPPINS’를 채택했습니다. 한편으로는 아쉬웠지만, FUTURA는 획의 끝이 뾰족하고 숫자마다 약간 들쑥날쑥한 특징이 있었는데 해당 부분이 대체 서체에서 상당히 보완되어 서비스에 적용할 때 좀 더 안정적인 느낌이 들었습니다. 오히려 좋아(?)

FUTURA와 POPPINS 비교. 시스템 폰트는 noto sans CJK KR을 적용했다.

11. 디자인 컴포넌트

디자인 컴포넌트 시스템화 하기

Ui 요소들을 일괄적인 컴포넌트로 적용하는 과정은 설아님이 담당해주셨어요. 구글과 애플이 제시하는 규격(Material Design, HIG)을 참고해서 서체 크기를 반영하고, 확장성을 고려한 오토 레이아웃 설정, 색상을 포함한 Ui 요소에 네이밍 규칙을 적용하는 등 - 디자인 컴포넌트를 체계화하는데 많은 도움을 주셨어요. 시스템이 활성화된 상태에서 실제로 작업을 해보니, 속도면에서 이전보다 훨씬 좋아짐을 느낄 수 있었습니다.

12. 서비스 핵심기능

홈 화면 초안(좌)과 최종안(우) 비교.

초반에 잡아놨던 시안에서 큰 틀의 구조는 바뀌지 않았지만, 디테일한 요소(너비, 위치, 배치 형태 등)를 고쳐가면서 최종안이 나왔습니다. 이제 타임스페이스의 핵심기능 3가지를 소개해드릴게요!

1. 디지털 & 아날로그 캡슐 (택1)

2021년 4월 기준 화면(현재는 업데이트 되었습니다)

2가지 타입의 캡슐을 선택할 수 있습니다. 앱 내에서 바로 볼 수 있는 '디지털 캡슐' 과, GPS를 기반으로 실제 장소 100m 내에 도달 시 해제할 수 있는 '아날로그 캡슐' 을 제공합니다. 공통적으로 유저가 설정하는 시간에 따른 해제 조건을 달성해야 열립니다. (Shop에서 해제 열쇠 구매가능)

2. 친구와 함께하는 그룹 시동

캡슐 작성 화면 내 '친구 태그하기'

해제알럿 - 그룹캡슐 조건 - 해제 화면

내 주변 지인에게 '친구 신청'을 할 수 있습니다. 등록된 친구에 한해 캡슐 작성 화면에서 추가 및 태그가 가능합니다. RPG 게임에서 파티에 함께 참가하는 것처럼, 모든 인원이 '대기' 시 해제 조건이 충족됩니다.

3. 과거의 n년전 오늘, 365 history

과거의 n년전 오늘은 어떤 이벤트가 발생했을까?

'과거의 n년전 오늘'을 홈 화면 하단에서 매일 자정에 확인할 수 있습니다. (ex: 2013년의 12월 17일은 플레이스테이션 4가 대한민국에서 출시된 날) 일별 데이터는 위키트리를 기반, 긍정적인 사건 위주로 엑셀 시트에 작성되었습니다.

꽤나 노가다였지만 함께하니 의외로(?) 금방 채웠던 기억이 나는데요. 소소하지만 재미있는 기능이라, 저도 이따금 재미로 확인하기 위해 종종 앱에 들어가는 것 같습니다.

13. UX writing

보이스 톤앤매너를 맞추고 간결하게 전달하는 <마이크로 카피>

서비스의 UX Writing은 유저의 경험을 개선하고 제품의 매력도를 올리는데 도움을 줍니다. 어느 순간부터 작업을 하다보니 각 화면마다 격식체와 구어체가 혼용되거나, 다소 결이 맞지 않는 딱딱한 문체가 아쉽게 느껴졌습니다. 읽는 이도, 쓰는 이도 피로감을 더는 친숙한 표현을 고려하면서, 타임스페이스의 보이스 톤앤매너를 일관되게 적용하려는 시도를 했습니다.

14. Notifications

상황별 알림을 모두 보여주는 알림함

홈 화면 상단에는 서비스 내 상황별 알림을 모아볼 수 있습니다. 캡슐이 해제 가능하거나, 친구 신청을 받았을 때, 랜덤 이벤트 등의 상황을 고려해서 유저가 언제든지 확인할 수 있는 저장소 역할을 해줍니다.

15. 느낀 점

약 1년 반 동안 너무 고생하셨습니다.

총 14번의 오프라인과 5번의 온라인 밋업, 약 8개월의 공백 기간 이후 - 긴 텀의 디자인 & 개발 기간을 거친 끝에 완성한 앱이라 감회가 새로운 것 같아요.

2021년 4월에 출시한 이후 벌써 약 8개월이 되어가는데요. 출시 이후 주변 지인분들께 여러 가지 좋은 피드백을 받기도 하고, 페이스북 광고 마케팅을 기점으로 훅 유저수가 늘어서 띠용? 하고 신기했던 경험을 했습니다. 아쉽게도 운영 리소스와 비용의 문제로 추가적인 개선은 하지 않는 걸로 결정이 되었지만, 서비스를 이용하는 유저분들을 위해 작은 단위의 서버를 유지하기로 했습니다:)