Fast campus School

UX/UI 디자인 Swift iOS 개발

[모바일 앱 해커톤 현장 스케치] UX/UI 디자인부터 iOS 개발까지

3개월만에 다시 찾아온 해커톤, 이번엔 UX/UI 디자인 스쿨과 콜라보?

2017.03.17 | 5590 명 읽음

해커톤(Hackathon)은 마치 하나의 목표 지점을 향해 달려가는 마라톤처럼 팀을 이뤄 쉬지 않고 프로젝트를 달성해내는 이벤트를 말합니다. 총 다섯개의 팀으로 나누어져 오후 4시부터 다음날 9시까지 17시간 동안 진행되었던 해커톤의 생생한 현장을 전달합니다.


지난 11월, 처음으로 진행했던 해커톤! 뜨거운 호응과 함께 3개월만에 다시 돌아왔습니다. 역삼동 MARU 180에서 3월 8일 오후 4시부터 3월 9일 오전 9시까지 진행된 이번 두 번째 해커톤에는 특별한 점이 있었는데요. 바로 iOS 개발 스쿨 3기와 UX/UI 디자인 스쿨 1기 일부 수강생들이 함께 진행했다는 점입니다! 그럼 그 뜨거웠던 현장 속으로 가볼까요? 


해커톤에 빠질 수 없죠. 에너지 드링크!


밤을 새워 개발하고 디자인하기 위해, 해커톤 하면 빠질 수 없는 그 것! 본격적으로 시작하기에 앞서 에너지 드링크도 충분히 준비 했답니다. 앞으로 17시간을 불태워보는거죠!



디자이너와 개발자의 협업 툴, Zeplin


이번 해커톤을 통해 디자이너와 개발자가 처음 협업 하기 때문에, 먼저 어떤 방식으로 협업을 해야할지 알고 가는 것이 중요했습니다. 현업에서는 주로 'Zeplin'이라는 툴을 사용하는데, 디자이너로 일한 경험이 있는 iOS 개발 스쿨의 종찬님이 친절하게 사용법에 대해 설명해주셨습니다. UX/UI 디자인 스쿨 수강생들은 사전에 UX/UI 디자인 스쿨 과정을 통해 Zeplin에 대해 알 기회가 있었는데요. 실제로 디자이너로서 Zeplin을 통해 개발자와 소통해볼 수 있다는 기대감에 기대가 많았습니다. Zeplin을 통해 디자이너와 개발자가 어떻게 서로 배려하고 협업을 해야할지에 대해 상세한 설명을 듣는 유익한 시간이었습니다.


조편성 중인 모습 + 각 팀당 주제



# 본격적인 해커톤의 시작!

이번 해커톤의 전체적인 테마는 '솔로 혹은 커플들을 위한 앱'이었습니다. 테마는 해커톤 당일 발표 되었지만, UX/UI 디자인 스쿨 수강생 참가자들에게만 사전에 공유 되었는데요. 테마에 맞춰서 UX/UI 디자인 스쿨 수강생들이 UX 기획을 바탕으로 고민해온 주제를 발표하는 시간을 가졌습니다. 그 후, iOS 개발 스쿨 수강생들의 치열한 주제 쟁탈전 끝에 조편성이 되었고 본격적인 해커톤을 시작하였습니다!


프로젝트 진행 모습 1



조 편성이 끝나기 무섭게 조별로 빠르게 프로젝트 진행에 돌입했습니다. 열기가 느껴지시나요? 다른 조를 신경 쓸 겨를 따위는 없어진거죠. 오로지 "논의 - 디자인 - 개발"의 연속일 뿐입니다. 모바일 앱 디자인 및 개발에 심혈을 기울이는 모습, 별써부터 그 결과가 기대됩니다!


Wireframe 작업 모습



우선 주제에 대한 UX 디자인을 통해 앱 서비스를 사용할 사람들이 누구일지 예측하고, 그 사람들의 필요와 인사이트를 도출하였습니다. 앱 서비스의 전체적인 정보 흐름을 파악하기 위해 Information Architecture (IA)를 세우고 디자이너는 디자인을, 개발자는 디자인 파트를 제외한 기능적 파트의 개발을 분업하여 진행하였습니다. 

UX 디자인을 통해 도출된 인사이트를 사용자가 접할 interface인 모바일 화면에 어떻게 보여줄 것인지 또한 중요한데요. 이를 위한 UI 디자인 작업을 진행하였습니다. 위의 사진에서 볼 수 있듯이, 본격적으로 UI 디자인에 앞서 미리 종이에 그려보는 wireframe 작업을 진행하기도 하였습니다.


프로젝트 진행 모습 2



 단 하루만에 앱을 완성해야 하는 부담감 때문에 쉬지도 않고 모두들 집중하다 보니, 어느덧 새벽 1시가 넘은 시각. 지치고 굶주린 참가자들을 채워줄 야식이 도착했습니다!


집중하다보니 어느 덧 새벽 1시 22분


크아아아!! 치킨!!!!!



야식엔 역시 치맥이지만...! 맥주를 마시면 혹여나 잠들어 프로젝트에 지장이 있을까 싶어, 치콜로 대체하였습니다. 다들 엄청 배고프셨나 봅니다. 치킨이 순식간에... 그리고는 곧장 다시 프로젝트에 집중하셨습니다.



프로젝트 진행 모습 3



야식을 먹은 뒤로 잠을 이겨내고 뜬 눈으로 밤을 새우며, 프로젝트는 아침까지 계속되었습니다. 아침 8시! 한 명의 낙오자 없이 해커톤이 종료되었고, 최종 발표 시간만을 남겨두었습니다!! 하루동안의 결과물들이 어떨지 두근두근, 기대되네요!



# 혼자 술 마실 때 안주가 필요해? '혼술집'


1조 발표 모습


먼저 1조부터 보시죠. 1조는 '혼술집'이라는 주제로 진행하였습니다. 요즘 혼술 하시는 분들이 많은데, 그런 분들을 위해 간단하게 만들어 먹을 수 있는 안주 레시피를 추천해 주는 앱입니다. 특히 모바일을 흔들어서 랜덤으로 추천하는 기능이 참신했습니다.


1조의 UX 디자인 파트 (자료 제공: 김슬기님)


혼밥, 혼술, 혼영, 1인가구, 코인노래방, 쉐어하우스, 나홀로족, 카공족 등 점차 개인화되고 있는 사회 트렌드를 반영하여 기획하였습니다. 최근에는 관계와 권태기의 합성어인 '관태기'라는 용어까지 생겨났는데요. 홀로 문화를 누리는 나홀로족의 심리와 필요를 반영하였습니다. 짧은 시간이었음에도 UX 기획을 위해 설문조사까지 진행하여 인사이트를 도출하는 모습이 인상적이었습니다.


'혼술집'의 UI 디자인 (자료 제공: 김슬기님)


1조의 UX/UI 디자이너인 슬기님은 "UX 기획을 통해 도출된 인사이트에 맞게 쉽고 싸고 단시간의 안주 레시피를 제공하는 서비스를 만들려고 했어요. UI 디자인도 이에 맞게 쉽고 빠른 컨셉으로 깔끔하고 간략한 플로우를 구성했습니다."라고 UI 디자인의 논리성을 설명하시며 "컬러는 식욕을 부르는 오렌지를 메인 컬러로 잡았습니다."고 덧붙였습니다.


무엇보다 인상적이었던 것은 모바일을 흔들어서 안주 레시피를 랜덤으로 추천받는 기능이었습니다. 영상을 통해 확인하실까요?



[패스트캠퍼스 스쿨] iOS 개발 스쿨 + UX/UI 디자인 스쿨 해커톤 혼술집



# 사랑을 주거니 받거니 'PingPong'


2조 발표 모습


다음은 2조입니다. 2조는 'PingPong' 이라는 주제로 진행했는데요. 데이트 하기 전 서로에게 바라는 리스트를 선정해두면 랜덤으로 하나를 상대방 앱으로 선택해 알려주는 앱입니다!



'PingPong'은 연인에게 바라는 위시리스트가 랜덤 전달 되는 앱이다. (자료 제공: 김예주님)


2조의 UX/UI 디자이너였던 예주님은 "사귀면서 서로에게 바라는 점이 생기는데 직접 말하긴 그렇고, 말하지 않아도 상대가 챙겨줄 때 큰 만족감을 누리는 커플들의 니즈를 반영했다."며 "원하는 리스트를 작성하면 랜덤으로 미션이 전달되어 뜻밖의 만족감을 누리게 되는 상황을 재미있게 표현하고 싶었다."고 UX 디자인에 대한 기획 단계의 설명을 해주셨습니다.



'PingPong'의 UI 디자인


UI 디자인의 전반적인 Look & Feel도 설명해주셨는데요. UI 디자인은 최대한 심플하게 가져감으로써 사용자가 직관적으로 사용할 수 있도록 하였고, 색감은 달달한 사랑을 연상시키는 파스텔톤을 사용했다고 설명하셨습니다.



[패스트캠퍼스 스쿨] iOS 개발 스쿨 + UX/UI 디자인 스쿨 해커톤 PingPong


# 반려견 덕에 새로운 만남을! 'PetMe'


3조 발표 모습


다음은 3조입니다. 3조의 서비스 이름은 'PetMe' 입니다. 상대방의 얼굴 사진으로 데이트를 신청하는 앱은 식상하다! 오로지 프로필로 등록해놓은 반려견의 사진을 보고 함께 산책을 할 상대를 고르게 됩니다. 특이한 점은 반려견의 특징 이외에 상대방의 성별, 나이와 같은 정보를 사전에 알 수가 없다는 것! 남성 두 분이 산책을 하거나 아주머니와도 산책을 할 수 있는 것이죠. 서로의 인생 얘기를 나눌 수 있는 점에서 더 좋을 것이라 판단해 철저하게 의도 했다고 하네요!


'PetMe'를 시연 중인 모습


"싱글족이 증가함에 따라 그들이 키우는 반려견의 수도 비례하여 증가하고 있다."고 운을 뗀 지현님은 "반려견에게는 산책이 아주 중요한 요소인데, 한국인들은 다른 나라 대비 반려견들의 산책 비율이 낮은 것이 문제"라고 지적했습니다. UX/UI 디자이너로서 이런 문제를 해결하면서도 "혼자가 아닌 누군가와 함께 산책할 수 있는 서비스를 만들고자 했다."는 UX 기획 배경을 설명해주셨습니다.


'PetMe'의 UI 전략은, 해외 소개팅 어플 '틴더'의 카드 모션에서 아이디어를 얻어 개틴더 형식으로 구성했습니다. iOS 버전을 염두하고 하단 탭바를 구성하였는데, '매칭-주변-프로필'로 구성되어 있습니다. 메인인 '매칭' 메뉴에서는 왼쪽으로 스와이핑 할 시에는 싫어요, 오른쪽으로 스와이핑 할 시에는 좋아요로 분류되도록 디자인하였습니다. 데이터들은 마이페이지에 쌓이게 되며 자주 가는 산책로를 찾고 저장할 수 있는 기능도 있습니다.



[패스트캠퍼스 스쿨] iOS 개발 스쿨 + UX/UI 디자인 스쿨 해커톤 PetMe


# 혼자 여행하며 기록하고 싶어? 'SolGit'

다음은 4조입니다. 4조는 'SolGit' 이라는 이름의 서비스를 만들었습니다. 혼자서 여행하면서 사진과 간단한 메모를 기록할 수 있는 앱입니다!


4조 발표 모습


혼자 밥을 먹고, 혼자 영화 보고, 여행도 혼자 가는 시대. 누군가와 함께 하면 신경 쓸 일이 많고 번거로워 홀로 있을 때의 자유를 누리고 싶은 이 세대의 필요를 반영하여 기획하고 UX/UI 디자인 하여 만들어낸 서비스가 바로 'SolGit' 입니다.

심플한 이미지 박스 형태로 리스트가 구성되어 있으며, 손 쉽게 여행기록을 남길 수 있도록 만들었죠. 포스팅 안에는 지도도 있어서 그 위치를 확인할 수도 있게 제작하였습니다. 영상으로 확인 하시죠!



[패스트캠퍼스 스쿨] iOS 개발 스쿨 + UX/UI 디자인 스쿨 해커톤 SolGit - YouTube


# 당신의 인생을 디자인하고 싶다면? 'BucketList'

마지막으로 5조입니다! 5조의 주제는 'BucketList' 입니다. 다들 인생에서 꼭 해보고 싶은 버킷리스트가 하나씩 있을텐데요. 이것들을 ToDo 메모 앱처럼 관리해주는 서비스입니다.


5조 발표 모습


5조의 UX/UI 디자인을 책임졌던 의정님은 해커톤에 앞서 "개발자와의 원활한 소통으로 짧은 시간동안 어플리케이션을 완성하고 싶다."고 포부를 밝히셨는데요. "나의 목표를 한 눈에 보여주고 숫자를 통해 목표일을 쉽게 인지할 수 있게 기획했다."고 직관적이고 사려깊은 UX 컨셉을 가져가려 했다는 설명을 하셨습니다.


'BucketList'의 UI 디자인


UI 디자인에 대해서는 "사진을 이용해 심미적 요소를 강화하고 디데이 기능을 이용해 사용자가 세웠던 계획을 인지하고 수행하도록 했다."며 "위싱리스트, 팔레토에서 인사이트를 얻었다."고 설명하셨습니다.


'BucketList' 시연 모습


특히 의정님의 마지막 코멘트가 인상적이었는데요. "산출물이 나오기까지의 수용과 거절을 디자이너와 개발자들 간 대화를 통해 이해하고 대안을 찾아나가는 과정이 즐거웠으며, 앞으로 실무에서 개발자와 협업을 하는 것에 대한 자신감을 가질 수 있었다."고 말씀하셨습니다. 이것이야말로 이번 해커톤이 가지는 가장 큰 의미가 아니었을까요?



[패스트캠퍼스 스쿨] iOS 개발 스쿨 + UX/UI 디자인 스쿨 해커톤 BucketList


# 치열했던 해커톤. 수상을 하게 될 팀은~~?

다섯 팀의 결과물을 보니 어떠신가요? 모두들 하루동안 고생해서 퀄리티 높은 앱을 만들었고, 이제 대망의 수상 발표만 남았습니다! 평가는 주제의 적합성, 참신성 그리고 앱의 완성도로 총 3가지의 기준으로 참가자들끼리 서로 다른 팀을 평가하였습니다.


먼저 2등 수상팀의 발표에 앞서 2등의 상품은 강사님이 직접 준비한 상품으로 팀원 모두가 커피 한 잔씩 마실 수 있는 커피이용권입니다! 그럼 과연 2등은 어떤 조가 차지했을까요~?


바로~~~ 'PingPong' 이라는 참신한 주제로 앱을 완성한 2조가 차지했습니다! 축하드립니다~!


2등 팀 시상식


1등 상품!


다음으로는 대망의 1위입니다. 1위의 상품은 무려 백화점 상품권 10만원!!! 이 상품을 가져간 팀은 어디일까요~?


두구두구~~ 바로 'PetMe' 라는 반려견 사진으로 소개팅(산책)할 상대를 선택하는 앱으로 신선한 충격을 준 3조가 1위를 차지했습니다! 특히 발표할 때 엄청난 재치로 모두를 폭소에 빠뜨린 백진님의 공이 컸습니다.


1등 시상식


이렇게 무박 2일간의 해커톤이 끝났습니다. 무박 2일간 여러 면에서 배려해주신 MARU 180 관계자분께도 감사드립니다. 해커톤을 진행하면서 시간관리와 협업하는 방식, 그리고 그동안 배운 내용으로 결과물을 완성했다는데에서 뿌듯함을 느꼈습니다. 참가자분들 모두 수고 많으셨고 실무에서 필요로 하는 디자이너와 개발자들의 협업능력, 이를 갖춘 멋진 디자이너와 개발자가 되시길 응원합니다!


마지막 기념 사진 촬영 (초췌해도 멋진 사람들!)


그럼, 다음 해커톤 때 또 찾아뵙겠습니다!





UX 프로세스의 실적용부터 UI설계까지 스스로 완성할 수 있는 역량을 기르는 3개월 전일제 교육과정

UX/UI 디자인 스쿨 >>  


Swift로 상상속 앱을 만들고 주니어 iOS 개발자가 될 수 있는 4개월 전일제 교육과정

iOS 개발 스쿨 >>