brunch

You can make anything
by writing

C.S.Lewis

by 일리 Aug 17. 2021

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

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


들어가기 전에

제가 참여했던 DDD.는 디자이너와 개발자가 만나 4개월 동안 함께 앱 서비스를 제작하는 사이드 프로젝트 모임입니다. 대학생과 직장인 상관없이 자유롭게 참여할 수 있고, 격주 토요일마다 정기로 모여 서비스를 만드는 과정을 거치게 되는데요. 저희 팀은 3기였던 당시 2020년 2월 최종 발표를 이후로 잠시 멈춰있다가, 우여곡절 끝에 약 3달 전, 앱 서비스 출시(!)를 했습니다.


첫 출시인 만큼 미숙한 부분이 무척 많았지만 동시에 많은 것들을 경험할 수 있었어요. 아무래도 조금 늦은 감이 있지만 프로젝트의 제작 과정을 간략히 되돌아보고, 또 이 글이 누군가에게 조금이나마 참고가 될 수 있었으면 좋겠습니다. 본 사이드 프로젝트 회고록은 (상), (하) 총 2편으로 나눠 작성해보려 합니다.


<만든 이>

Designer : 이도후, 김설아

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



1. 서비스 주제 선정

insta @simpsons.info

저희 팀이 선정한 서비스 주제는 ‘타임캡슐’입니다. 첫 아이디어 회의 당시 사진 공유, 조별과제, 끝말잇기, 지도, 소개팅 등 다양한 주제가 나왔는데, 그중 모임 기간 동안 실질적으로 구현할 수 있는 범위의 주제(현실은 절대 그렇지 않았고 먼 훗날 출시하게 되는데···)면서 아직까진 해당 서비스가 나름 블루오션이라 판단했어요. 어쩌면, 어릴 적 폴더폰을 경험한 세대라면 한 번쯤은 땅에 캡슐을 묻어버린 경험이 있을지도 모릅니다.


당시 추억이 생생히 떠오르시나요? 지금은 그 어느 때보다 스마트폰이 익숙한 시대지만, 문득 캡슐의 아날로그적 경험을 담아 스마트폰에서 적절히 녹여내면 어떻게 구현될지 궁금해졌습니다. 우리가 한 번 제대로 만들어볼 수 있지 않을까? 하는 생각을 갖고 서비스 구상에 본격적으로 들어가게 됩니다.


2. 기존 앱 비교

기록 관련 카테고리는 크게 3가지로 분류했습니다. 하루의 일과를 기록하는 ‘일기’,  업무 혹은 과제 해결에 초점을 두는 ‘to-do’, 장시간을 바탕으로 게시물을 리마인드 해주는 ‘타임캡슐’로 나눠졌어요. 그중에서도 타임캡슐은 온라인보다는 오프라인 행사로 이뤄지는 사례가 많았고, 해외에서 만들어진 앱의 경우 사용성이 여러모로 아쉬운 점을 손에 꼽았습니다. 앞서 언급한 3가지 카테고리 이외에도 게이미피케이션(Gamification)을 적극 활용하거나 습관 형성을 목표로 하는 앱 , 위치추적 관련 앱 등을 다양하게 살펴봤는데요. 전체적인 화면 Flow를 한눈에 볼 수 있는 mobbin 도 리서치에 많은 도움이 되었습니다.



3. 팀 내 인터뷰 진행

In-depth 인터뷰 질문지 중 '추억 의존도'에 대한 문답

서비스의 니즈를 검증할 수 있는 객관적인 근거(소위 말하는 뇌피셜)가 없던 와중에, 설아님의 좋은 제안으로 인터뷰 질문을 구성해서 팀원들과 함께 문답하는 시간을 가졌습니다. 정성적으로나마 의견을 듣고 취합해서 서비스의 실마리를 얻기 위함이었는데, 그중에서도 '추억 의존도'를 확인하는 질문이 가장 기억에 남네요.


4. 차별점 & 타겟

As is - To be

새로운 무언가를 만들어내기보단 기존 서비스의 아쉬운 점을 개선하는 것이 보다 명료하고, 충분한 차별점이 될 수 있다고 생각합니다. 저희는 이전 조사를 바탕으로 타임캡슐을 화면에서만 끝내지 않고, GPS를 활용하여 특정 장소에서만 열 수 있는 '아날로그 캡슐' 기능을 넣었습니다. 만약 유저가 캡슐을 빨리 보고 싶거나 해외에서 생성하는 등의 특정 상황을 대비해서 언제든 열어볼 수 있는 유료 서비스(=앱 내 수익모델)를 설정하고, 가장 큰 문제점이라고 볼 수 있는 리텐션(Retention)을 끌어올릴 수 있는 방안들을 고민했는데요. 서비스의 전반적인 사용성을 고려하면서도 심미성을 절대 놓치고 싶지 않았는데, 감성을 충족해줄 수 있는 심미적인 디자인이 해당 서비스 방향에도 적합하다 생각했습니다.

(아티클 참조) 예쁜 디자인이 중요할까?
https://brunch.co.kr/@cliche-cliche/90?fbclid=IwAR0hnoXMhjr3z5ykRmNXyyQ9KrbZAStk5ytJmW8dNq4MBk6Lhow0meDDAfQ

메인 타겟은 '추억을 남기고 싶은 10대 후반 ~ 20대 초반 커플 또는 학생'으로 설정하고, 상황별 타겟은 힘들 때 위로받고 싶거나 / 나만의 장소를 기록하고 싶을 때 / 미래의 '나'에게 말을 걸고 싶은 대상 등으로 (다소 모호한 부분이 있지만) 분류했습니다.


5. 핵심 기능 선정(4가지)

'나'에게 다양한 형태의 추억을 제공하는 것을 목표로 두고, 크게 아래와 같이 4가지 핵심 기능을 정리했습니다. (이외의 부가기능은 다음 편에서 적어볼게요)

일단 여기까지 얼추 3분의 1은 완성한 기분

GPS 기반 '아날로그 캡슐' : 특정 장소  100m 이내에서만 열리는 캡슐

365 history : 'n년 전 오늘' 발생했던 역사 또는 이벤트를 홈 화면 하단에 노출

위키를 토대로 작성한 365 history 시트

그룹 캡슐 : 등록된 친구를 태그 해서 함께 참여할 수 있는 기능

(운영)콘텐츠 : 과거 세대별 유행했던 문화 또는 소비 등을 엮어 발행하는 카드형 스낵 콘텐츠 또는 퀴즈(해당 기능은 운영 리소스의 문제로 실제 구현에서는 아쉽지만 배제되었습니다.)


6.IA + 와이어프레임

본격적인 GUI 작업으로 넘어가기 전에, 필요한 화면을 구조화하는 작업을 거쳤습니다. 당시 그래픽을 위주로 작업했던 저는 플로우 차트(Flow Chart), IA, 와이어프레임(Wireframe) 등의 생소한 UX용어들을 처음 접했는데요. 마침 설아님이 UIUX를 깊이 공부하고 계셨던 찰나였고, 겸사겸사 함께 차트를 그려보는 시도를 했습니다. 바로 작업하면 놓칠 수 있었던 화면들을 다음과 같이 차트로 표현해보니 한눈에 들어오고, 막연히 생각했던 것보다 유저의 상황별로 복잡하게 고려해야 할 경우의 수가 많다는 걸 알 수 있었습니다.


플로우 차트(Flow Chart) 와 IA(Information Architecture) 화면

그중에서도 홈 화면의 비중이 가장 컸기 때문에, 필요한 화면 중 가장 빠르게 스케치를 진행하게 되었습니다. 여러분은 '타임캡슐' 키워드에서 단적으로 어떤 이미지가 연상되시나요? 저희는 보편적이지만 우주, 시간, 여행선, 행성 등이 차례로 떠올랐는데요. 전체 화면이 우주라고 가정했을 때, 하나의 캡슐은 가장 크게 보이면서 동시에 행성으로 표현되면 재밌겠다고 생각했어요.

첫 와이퍼프레임(Wireframe), 스케치 후 화면으로 옮기는 과정

이를 바탕으로 3가지 버전의 홈 화면 초안이 완성되었습니다. 1) 캡슐의 달걀 형태와 로켓을 엮고 행성의 고리는 캡슐의 시간선을 직접적으로 보여주는 형태, 2) 개개인의 보물상자가 우주에서 머무르는 형태, 3) 행성을 '원'의 오브제로 간단하게 담아낸 형태 등이 있습니다.

스케치 직후 완성된 홈 화면 초안 - 총 3가지 ver.

결과적으로 다수결에 의해 첫 번째 시안이 채택되었습니다. 이 중 가장 우주와 캡슐의 콘셉트를 충실히 담아낸 시안은 첫 번째 화면이 가까웠기 때문인데요. 당시 초안인만큼 현재의 최종 화면과는 다른 형태를 띠는데, 디벨롭 이전의 과정을 다시 돌아보니 여러모로 감회가 새롭습니다.


다음 편에 이어서 계속 ···


사이드 프로젝트 회고록 - 타임캡슐 앱(하)에서는 서비스의 아이덴티티, 시스템 구조를 포함한 최종 결과물에 대해 이야기하면서 마무리하겠습니다. 읽어주셔서 감사드려요!


작가의 이전글 우리의 인생을 한 문장으로 표현한다면
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari