[해커톤] 2022 인하대학교 컴퓨터공학과 해커톤 후기

무박 2일 해커톤이 열렸다. 저녁 7시부터 다음날 오전 8시까지 주제에 맞춰 앱 개발을 하고, 오후 5시까지 발표 영상을 제출하는 대회였다. 팀원들이 전부 22학번이라서 팀 명은 율곡이이로 했다. 개인적으로는 인덕이 빙수를 하고 싶었는데...

 

나는 개발을 잘 모르니까 디자인으로 참여했다. 이런 식으로 대외활동 경험을 쌓으면서  개발도 배워서 언젠간 개발자로 대회에 참여하고 싶다.

 

주제: 포스트 코로나

주제를 듣고 맨 먼저 팀원들끼리 아이디어를 모아 봤다. 피그마를 사용해 각자의 아이디어를 내면서 포스트잇 형식으로 기록했다. 시간도 짧고 다들 해커톤은 처음이라서 별 기대를 안 했었는데 생각보다 좋은 아이디어가 많이 나와서 놀랐다. 역시 집단지성과 타임어택의 힘은 대단한 것 같다.

각자의 의견을 포스트잇 형식으로 적으면서 아이디어를 냈다. 메인 아이디어는 노란색, 메인 아이디어를 구체화하는 서브 아이디어는 회색으로 정리했다. 의견을 말하면서 '퀘스트'로 아이디어가 좁혀졌는데, 그 아이디어를 빨간색 포스트잇으로 썼다.

 

이런 식으로 처음에는 텍스트의 크기에 맞춰서 박스 크기를 조정했는데 생각보다 비효율적이고 시간이 많이 들었다. 다음부터는 그냥 포스트잇 형식으로 쭉 밀고 나가야겠다.

 

 

아이디어 구상

기획자의 중요성을 깨달았다. 기획자가 없이 우리끼리 앱 구상을 하려니 상당히 힘들었다. 우리가 어떻게든 짠 IA와 화면 구상이다.

 

 

앱 UI/실제 개발

앱 UI는 갤럭시탭을 이용해서 같이 직접 그리면서 구상했다. 확실히 이 편이 더 효율적이었던 것 같다. UI를 짤 때는 새로운 시도나 특이한 도전을 하는 대신 '전통을 따르는' 디자인을 하려고 노력했다. 이미 익숙한, 아마 모두에게 익숙할 그런 디자인을 빠르게 뽑아내는 데에 집중했다.

 

앱 UI를 만드는 게 생각보다 힘들었다. 어떤 요소가 들어가야 하는지, 어떤 요소를 강조해야 하는지, 배치는 어떻게 하는지... 모두 낯설고 어려운 것들 투성이였다. 물흐르는 느낌으로 UX를 유려하게 하자니 내용이 텅 비고 필요한 내용들을 전부 집어넣자니 UI가 난잡해졌다.

 

하나 배운 것은 '어떤 걸 강조해야 하는가'를 미리 정해 두고, 나머지는 생각 없이 때려 박아야 한다는 거다. 텍스트 하나하나 디자인적 요소를 넣으면 전체 디자인이 부담스러워진다. 또 생각 없이 하나하나 일단 예쁘게 넣고 보자 하는 태도로는 절대로... 개발자에게 빠르게 디자인을 넘겨줄 수 없다. 특별한 컨셉을 생각하고 있는 게 아닌 이상 강조해야 할 텍스트나 버튼에 테마색을 집어넣고, 나머지는 전부 무채색과 고딕으로 가는 게 맞다.

 

 

 

이런 과정들을 거쳐서 UI를 전부 만들었다. 1~2페이지마다 개략적인 디자인을 개발자에게 넘기고 메달 색깔이나 픽토그램 종류같은 디테일은 나중에 수정하는 방식으로 속도감있게 뽑았다.

 

테마 캐릭터도 만들고 좀 더 게임 느낌으로 자글자글 뽀짝뽀짝... 그런 느낌으로 만들고 싶었는데, 결국 항상 해왔던 깔끔하기만 한 디자인밖에 못 했다. 실력이 부족한 탓이었다. 지금까지 해왔던 디자인들은 전부 흔히 말하는 깔끔한 디자인이었고 컨셉이 있는 디자인이나 캐릭터 구상같은 건 해 본적이 없었기 때문에 매번 해왔던 것을 자가복제 하는 꼴밖에 안 됐다.

 

어플의 아이덴티티와 컨셉을 와닿게 풀어 나가는 건 디자이너의 역할인데, 내 실력이 부족해서 그걸 못했다. 독창적인 아이디어를 살리지 못하고 평면적인 어플을 만들게 된 건 전부 내 탓이다. 팀원들한테 미안한 마음을 어떻게 말로 다 표현할 수 있을지...

이런 식으로 원탁에 빙 둘러앉아 대회를 진행했다.

 

 

발표자료

발표자료에 영혼을 갈았다. 척추뼈도 같이...

메인 페이지에서 가장 신경을 쓴 점은 보자마자 어? 하도록, 뭔가 있어보이고 궁금해지도록 화려하게 디자인하는 거였다. 그걸 위해서 테마색인 빨간색을 밑에 쫙 깔았다. 앱 UI를 목업해서 잘 보이게 깔아놓고 그 주변에 미션, 랭킹같은 느낌의 3D 아이콘들을 배치했다. 일률적이지 않게 방향을 잘 틀고 적당한 블러처리로 공간감을 더해서 뭔가 다이나믹한 느낌을 강조했다. 

 

Overview에서는 어플 전체의 아이덴티티를 한 문장으로 담아내고 싶었는데, 그게 잘 안 됐다. 코로나 끝났다... 해 보러 나가자... 그래서 뭐? 이런 느낌... 그 밑에 뭐라고 설명을 써 놓긴 했는데 저런 건 아무도 안 읽는다. 시간도 촉박하겠다 날씨 아이콘 소스를 사용하려고 억지부린 느낌이다.

 

전체적으로 감정적으로 어필하는 느낌이라 뭔가 객관적이어 보이는 자료가 꼭 들어갔어야 했다. 찾고 찾아도 이렇다 할 자료가 그다지 없어서 2개로 만족했다. 밑에 들어가는 그래프 설명 텍스트는 필수적이라기보다 그냥 디자인적으로 예쁘라고 넣었는데, 막상 쓰려니 시간이 너무 부족해서 거의 제출 2분 전에 휘갈겼다.

 

'점점 줄어드는 원격 비대면 수업 비율'과 '확 줄어든 비대면 수업 인원'의 색깔이 다른 건 내 실수다. 두가지 색깔 중 하나를 고르려고 했는데 정신이 없어서 저대로 제출했다... 위에 토하는 이모지를 저런 식으로 배치한 것도 실수다. 토하는 이모지에 먼저 시선이 꽂히든 제목에 먼저 시선이 꽂히든 해야 하는데 어중간한 위치에 어중간하게 강한 이미지를 배치해 놔서 시선이 붕 뜬다. 그 결과 생각이 일목요연하게 흐르지 않고 집중력이 흐트러지게 됐다.

 

 

뭔가 기분이 붕붕 뜨는 아이콘을 Persona에 시선이 집중되도록 배치했다. 말풍선 하나에 그 인물의 특성을 녹여내려고 노력했다. 그라데이션을 살짝 넣으려고 했는데 너무 넣어서 뭔가 탄 것처럼... 말풍선 색깔이 이상해졌다. 태그 형식으로 인물의 특징을 간단히 요약한 건 잘한 선택이다.

 

'22세 김철순 씨의 등교 여정'은 아무도 안 읽을 거다. 예쁘라고 넣은 텍스트다. 대신 아... 김철순씨... 라는 생각이 한 번에 은은하게 깔리도록 위에 넣은 아이콘과 같은 사람을 배경에 오버레이했다. '기분이 점점 나빠진다'와 '이 시점에선 이런 기분일 것'을 섞기 위해 그래프 위에 이모지를 넣었다.

 

문제와 해결책을 뭔가 명중하는... 이미지의 아이콘과 함께 배치해서 어! 하는 기분이 들도록 디자인했다.

 

 

위의 것들을 좀 종합해서 나온 것 같은 느낌으로 로고를 넣었다. ~해서 우리 인하 퀘스트는 재미와 실용을 한 번에 잡은 적응 도우미가 될 거다~ 이런 느낌으로...

 

 

 

 

앱 UI는 디자인했다기보다 그냥 거의 때려 넣다시피 했다. 제출 시간까지 한 10분 남았던 것 같다. 

 

 

 

 

후기

모두가 미숙했고 그런 만큼 실수도 많았지만, 한 가지 확실한건 정말 재밌었단 거다. 내가 대학에 오기 전에 생각했던 컴공의 전형같은 느낌... 대회에 나가기 전에는 서로 좀 어색하고 서먹서먹한 동기들이었지만 대회를 진행하면서 많은 얘기를 나누고 모두 정말 멋있는 친구들이란 걸 깨닫게 됐다. 모두 깊은 생각과 큰 가능성을 품은 사람들이었다.

 

동시에 성질만 부릴 줄 알았지 정작 실력은 한참이나 부족한 내 자신이 부끄럽게 느껴졌다. 밤을 새야 하고 또 시간도 촉박하다보니 주변에 있는 팀원들에게 자꾸 짜증을 냈다. 걔네도 긴장되고 피곤한 건 마찬가지였을 텐데... 이 부분을 언제 사과해야할 지 모르겠다.

 

해커톤은 정말 재미있었다. 대회 자체도 내 낭만과 꼭 들어맞았고 무엇보다도 팀원들이 정말 좋은 사람들이었다. 함께해 준 팀원들에게 감사하다.