해커톤으로 탄생한 <국밥마라>, iOS 출시까지.
2020년 SOPT 솝커톤 회고
2020년 11월 21일, IT대학생연합창업동아리 SOPT의 무박 2일동안 열리는 해커톤에 참여했다.
팀은 랜덤으로 이루어지며, 나는 모바일 앱 팀으로 갔다. 우리팀은 YB와 OB의 비율이 적절하게 섞여있었고, 일단 다들 잘한다는 얘기 한번씩은 들어본 친구들이어서 참 안심이 되었다 ㅎ 나는 디자인 리드를 맡았고, 다같이 저녁을 먹으며 주제가 나오길 기다렸다.
27기 솝커톤의 주제는 '중독'이었다. 쉬우면서도 어려운 주제였다. 우리는 다같이 주제에 대한 아이데이션을 했다. 중독과 관련된 키워드를 떠올렸을때 긍정적인 단어보단 부정적인 단어가 많이 떠올랐다. 이를테면 담배, 술, 약 등등... 이런 부분은 누구나 떠올릴 수 있는 키워드여서, 우리는 남들과 차별화되는 중독의 이미지와 구현가능성을 염두에 두고 회의를 했다.
유저가 앱을 사용할 때 보통은 긍정적인 경험을 유도하는게 우리의 몫이다. 그래서 부정적인 주제보단 긍정적인 중독에 대해 생각해보기로 했다. 그러다 '마라탕 중독'이라는 키워드가 나왔다. 한참 마라탕, 국밥 중독이 밈처럼 쓰였던 때였다. 다들 재밌다는 반응이었고, '혈중마라농도 떨어진다'는 밈에서 착안한 마라탕&국밥 중독자를 위한 앱 서비스를 기획하게 되었다.
주어진 시간은 12시간정도였고, 이 안에 구현까지 가능하려면 기능을 많이 넣으면 힘들거라 생각했다. 1시간 가량의 기획 회의를 통해 좁혀진 서비스의 기능은 다음과 같다.
1. 유저가 기록한 날짜로부터 하루가 지날수록 혈중마라농도가 떨어지는 것을 시각화해서 표현하기
2. 다른 유저들의 기록을 보며 경쟁심과 재미를 유도할 수 있는 게이밍적인 요소
3. 다른 사람에게 나의 중독을 마음껏 자랑할 수 있는 기능
사실 솝커톤의 의도도 그렇고, 현실적으로 유저가 이 앱을 사용할까..?에 대한 비판적인 관점을 최우선시할 필요는 없었다. 우리는 그저 '재미'를 주고 싶었다. 아니 이런 앱도 있다고? 나도 마라탕 좋아하는데 이런 앱도 나올 수 있구나! 정도의 반응을 끌어내고 싶었다.우리는 이 실험적이고도 재밌는 서비스를 만들기 위해 빠르게 작업에 들어갔다...는 얼렁뚱땅 빙글빙글 웰컴투헬..
1. 기능 정리 및 와이어프레임
정말 알아보기 힘든 와이어프레임^^,, 기획과 동시에 와이어프레임을 짰기 때문에 정성은 버렸다. 이 앱은 크게 1. 스탬프 2. 랭킹 3. 공유로 이루어진 서비스였고, 핵심기능은 마라/국밥을 먹고 우리 앱에 들어와 스탬프를 꽝! 찍은 후 sns에 나의 중독을 널리 공유 하는 것이다.
앱을 열자마자 스탬프가 보여야 찍을거라 생각했고, 찍은 후에 바로 공유 기능으로 이어져야 공유를 할거라 생각했기 때문에 자연스러운 플로우를 유도하기 위한 고민을 했다.
깜찍한 국밥마라의 IA다. 군더더기 없는 깔끔한 기능과 연결고리를 유도했다. IA를 보면 홈탭과 랭킹, 마이페이지 모두 마라와 국밥으로 나뉘는데, 우리 앱은 크게 마라와 국밥을 등록할 수 있어서 홈뷰와 랭킹에서 어떻게 둘다 보여줄 수 있을까 고민이 되었다. 여러 서비스의 레퍼런스를 빠르게 리서치했고, 우리가 제일 크게 참고했던 것은 당시 유행하던 '성향/취향 테스트'였다. 스낵 테스트, 나에게 맞는 여행지 테스트 등 한참 여러 서비스에서 MBTI의 유행에 따라 성향/취향 테스트가 쏟아져 나오고 있었고, 우리의 앱에도 적용할만 했다. 우리 앱은 어찌보면 2020년 유행의 집합체를 담은 최고의 앱이 아닐까...아직도 그런 생각이 든다. 마라중독과 취향의 결정체...
2. UX Writing의 시작, 국밥마라만의 위트있는 문구
UX Writing의 3가지 원칙
: 보이스앤톤 먼저 디자인 - 명확하면서 간결하고 유용한 표현 사용 - 사용자의 눈으로 다시 한번 확인하기
국밥마라의 보이스앤톤은 배달의민족의 마이크로카피를 많이 참고했다. 우리는 위트있고, 능글거리는 말투로 사용자들을 웃길 생각이었다. 마이크로카피가 필요한 부분을 정하고, 각각의 문구를 다같이 아이데이션했다. 해커톤에서는 다같이 고민해볼수록 더 신선하고 좋은 해답이 나온다. 먼저 스탬프의 리셋 주기는 한달이고, 마지막 스탬프를 찍은 시점부터 지난 날을 표시하기 위해 '이번달 마라 먹은지 벌써 2일이나 됐다'라는 심플한 문구가 홈 화면에 들어갔다. 스탬프를 찍고 난 후 SNS에 공유하기 위해선 일종의 어그로(?)성 멘트가 필요했고 '오늘도 내 마음에 마라를 찍고 말았다...'와 같은 문구로 정해졌다. 그리고 내 랭킹과 레벨을 나누어 마라초 6학년, 혈중마라농도 80%와 같이 표현했다. 초등학교부터 전무까지, 여러 랭킹이 있고(이 기능은 출시까지 이어지진 않았다) 팀원들이 더미데이터를 쌓느라 고생을 했다. 혹시 볼드처리한 문구만 봐도 우리 앱의 느낌이 어떨지 예상이 가는가? 그렇다면 우리의 보이스앤톤은 성공했다고 볼 수 있다.
3. GUI가 중요해!!!
마라 하면 뭐가 떠오를까? 일단 국물의 그 빨간 기름과 노오란 국물이 생각난다. 마라의 아이덴티티 컬러는 레드&옐로우다. 그리고 국밥의 아이덴티티 컬러는 아무래도 뚝배기의 블랙과 뽀얀 국물인 화이트이다. 확고하게 떠올르는 컬러와 더불어 뚝배기에 담긴 국밥과 깊은 그릇에 담긴 마라의 모습 자체가 시그니처이다. 나는 그 모양 자체를 스탬프에 담고 싶었다. 배달의민족 앱을 보면 중식, 한식 등 음식 그대로의 모습으로 아이콘을 만들었다. 아이콘만 봐도 우리는 음식을 떠올리고 입맛을 다시지 않는가? 나는 내가 제일 자신없지만 해야만하는 국밥/마라 일러스트 자료를 찾았고, 우리 앱에 맞는 느낌으로 그래픽을 그려봤다.
저 건더기 하나하나 그리는게 정말 킹받았다...내 아이패드 12.9인치가 빛을 발했던 순간이었다. 국밥 뚝배기, 마라 그릇을 중심으로 다양한 배리에이션이 나왔고 이는 스탬프에 쓰이는 그래픽요소가 되었다. 주 그래픽을 그리고 나니 국밥마라 앱의 전체적인 GUI가 쉽게 잡혔다. 우리는 폰트 시스템을 정리하고, 컴포넌트를 완성해갔다.
그렇게 나온 홈화면..! 홈에서 신경쓴 부분은 1. 마라, 국밥 페이지의 구분 2. 도작찍기 버튼을 어디에 배치할 것인지 였다. 마라 페이지와 국밥 페이지를 시각적으로 구분하기 위해 상단에 선택 버튼을 배치했다. 그 밑으로 메인 문구를 배치하고 바로 옆에 도장찍기 버튼을 두어 시선의 흐름이 상단 마라 | 국밥 선택 바->마이크로카피->도장찍기로 자연스럽게 이어지도록 했다. 보통 하단 네비게이션 바의 중앙에 도장찍기 버튼을 두는 걸 생각하는데, 그렇게 되면 스탬프의 전체적인 뷰를 방해한다. 도장찍기버튼을 누르면 사진과 함께 스탬프를 등록할 수 있다.
완성된 우리의 전체 뷰4. 얼마 남지 않은 시간, 디자이너끼리의 분업
장담컨데, 솝커톤은 디자이너가 처음부터 끝까지 쉴틈이 없다. 기획부터 와이어프레임, GUI, 제플린넘기기, 수정사항 점검, ppt 제작까지.. 제출 전까지 난 거의 쉴 틈이 없었다. 화장실 가는 순간조차 5분을 넘기지 못했고...그래도 난 갈리는걸 좋아하니까..
아마 새벽 3시가 넘어가는 시점부터 우리는 점점 정신을 잃어갔다. 나는 제플린에 컴포넌트 넘기는 작업을 해봤던 터라 제플린은 다른 디자인담당 친구가 하기로 했고, 나는 발표ppt 작업을 담당했다. 더불어 개발 친구들의 인터랙션도 중간중간 이상이 없는지 확인하며 작업하느라 정말 정신이 없었다.
그 와중에 가장 고민되는 부분이 앱 로고였다. 어떻게하면 촌스럽지 않으면서 우리의 아이덴티티를 드러낼 수 있을까 정말 끝까지 고민했다...시간이 충분치 않았기에 뚝배기와 마라탕 그릇을 곂친 모양을 그렸고 이대로 제출했다... 추후 출시때도 로고에 대한 고민이 정말 많았는데 예상 밖으로 쉽게 풀려버린 비하인드도 있다. 쨌든 우리는 새벽 5-6시쯤..? 우리의 취지에 맞게 국밥도 시켜먹었고 정말 마무리 작업을 향해 달려갔다.
5. 솔직히 예상했던 1위
드디어 솝커톤이 끝났고 정말 기절 직전이었다. 솔직히 2년이 지난 이 시점에서 다시 솝커톤을 할 수 있을지 모르겠다. 체력이 예전같지 않아^^,, 정말 멋진 PM의 발표가 끝나고 우리는 결과가 나오기도 전에 해산했다. 정신을 잃은채 걷고있다가 우리 팀이 1위라는 소식을 알았고, 사실 예상했던 결과였다. 솝커톤의 취지에 가장 맞는게 우리 팀 자체가 아니였나 싶었다. 일단 다들 실력은 말할 것도 없었고 각자가 잘하는부분을 아낌없이 드러냈다는점이 컸다고 본다. 그리고 우리의 걸작을 본 솝트인들은 모두 이 앱에 대한 강한 니즈를 표출했고, 우리는 진짜 출시해볼까..?라는 생각에 진짜 iOS 출시를 하게되었다. 이 과정도 짧은 시간은 결코 아니었지만, 최대한 기능을 덜어내고 본질에 집중하자는 팀의 공통된 의견에 따라 무리 없이 출시를 할 수 있었다. 국밥마라 팀 다시 생각해도 대단했고 짧은시간에 극한의 효율을 냈던 최고의 팀이었다!!! 함께해서 너무 좋았고, 자극을 많이 받을 수 있어서 좋았던 솝커톤이었다
자랑스러운 국밥마라 팀 최고!!!
