[회고] 해커톤
동아리 활동의 일부인 해커톤에 대한 솔직하고 직설적인 회고글
1년 전, 생애 처음 해커톤이라는 행사에 참여했었다.
동아리를 막 시작하기 전엔 개발과의 협업도 처음이었는데, 이젠 개발과의 대회(소규모지만...)까지 참여해보는 것이 새삼이긴 했다. 하루아침에 서비스를 만들어보는 대회라니, 조금 끔찍하다는 생각도 들었다. 결과는 나름 만족스러웠다. 뭐... 팀 수도 얼마 없어서 상위 몇 퍼센트라는 정확한 통계값을 낼 순 없었지만, 처음 해 본 경험치곤 괜찮지 않았나 했다. 하지만 시간이 지나고 다시 돌아보니, 잘한 점보다 아쉬운 점이 더 선명하게 보인다. 경험이 쌓일수록 보이는 것들이 달라진다는 걸 실감하는 요즘이다. 이에 지금부터 해커톤에 대한 나의 주저리를 적어볼까 한다.
청춘 (부제: WHO MADE THIS)
대회 전날 공개된 주제는 '청춘' 이었다.
물론 주제의 범위를 넓게 두어 각 팀에서 나오는 다양한 아이디어를 보겠다는 운영진의 생각은 이해했으나, 처음 주제를 들었을 땐 너무 추상적이고, 어려웠다. 시중에 소비되는 서비스들은 추상적인 주제를 가지고 있지 않았다. 서비스의 개념이 모호하면 사용자들의 학습 비용이 증가하고, 초반 진입 장벽이 높아진다. 그리고 앞 문제를 완화하기 위해선 제공자들은 UI 요소나 인터랙션을 명확한 규칙 없이 설계할 가능성이 컸다. (나는 이번 해커톤으로 확실한 웹/앱 규칙을 배우고 싶었다...)
..꿈/현재,지금/기록,기억... 같이 청춘에서 범위를 조금만 더 좁혔으면, 확실한 아이디어 구상을 해서 팀원들과 더 깊은 토론을 할 수 있지 않았을까 하는 아쉬움이 컸다. 생각보다 사람들 아이디어는 겹치지 않는다.
따라오는 우리 팀의 MVP 기획안이다.
[주제]
- 나만의 타임캡슐 만들기
[키워드]
- 필름 + 타임캡슐 + 날씨 + 날짜
[MVP]
1. 사용자 구분 기능
2. 각 타임캡슐 별로 이미지 업로드
3. 각 타임캡슐을 열 수 있는 날씨 및 날짜 선택
[MVP 기능명세서]
1. 사용자는 소셜 로그인을 통해 계정을 만들 수 있다.
2. 사용자는 이미지 파일을 업로드 할 수 있다.
3. 사용자는 각 필름을 열어보고 싶은 날씨나 날짜를 선택할 수 있다.
[MVP 선정 이유]
1. 전체 MVP 선정 이유
: 그저 이미지를 저장 해놓고 볼 수 있는 갤러리의 기능에서 벗어나 날씨나 날짜에 따라 열 수 있도록 설정하여 당시의 청춘을 인상깊에 기억할 수 있도록 도와주는 서비스
2. 로그인
: 개인 커스텀이 가능한 필름모양의 타임캡슐 제작 서비스로서 계정이 필요하다.
3. 이미지 업로드
: [필름: 촬영기 렌즈를 거쳐 들어오는 빛에 짧게 노출하여 형성된 이미지를 담은 얇은 막] 이라는 의미를 담아 이미지 업로드를 메인 기능으로 선택했다.
4. 날씨 및 날짜 선택
: 일반적인 사진 기록 서비스와 차별점을 두는 기능이기 때문에 선정하였다.
화면 설계 및 디자인
작성된 MVP에 따라 타임캡슐 아이디어는 'Record Reel' 이라는 이름으로 다음과 같이 화면 설계가 되었다.
디자인 컨셉 설명
사용자 연령대를 제한을 두지 않은 만큼, 간단하고 직관적인 ui로 디자인하였다. 타이포 로고의 Record Reel에서의 ‘Reel’은 녹음테이프·필름 따위의 감는 틀을 뜻하며, ‘Record’는 청춘을 기록한다는 의미이다. 타이포 로고의 폰트는 Kodak 필름의 ‘Kodakku’가 쓰였고, 로고는 R과 테이프를 연상시키게 디자인되었다. 청춘을 여러 감각적 요소로 담았다는 의미를 전달하고자 노란색을 메인으로 한 비비드한 색상을 사용하였다. 또한 청춘 릴을 볼 수 있는 선택지인 ‘항상', ’날짜’, ‘날씨', 를 색깔로 구별해 사용자의 이해를 도왔다. 더 나아가 필름의 커버를 ’항상' 은 기본 필름 형태로, ’날짜' 는 체크무늬로, ‘날씨' 는 대표적인 4가지 그림으로 구별하였다.
디자이너로서 (부제: 뭐하냐)
일단 스스로에게 한마디 하겠다. 디자인 이게 최선이었냐?
생각해보고 답하는 것이다. 절대 최선 아니다. 내가 잘못했다.
1. 어설픈 키치함(kitsch)
키치한 감성으로 가려는 건 이해했는데... 3D를 적극적으로 활용하지도 못했고, 화면 설계도 어중간해서 이도저도 아닌 디자인이다. 대중성과 개성 사이에서 어정쩡함을 보여준다. 결론은 퀄리티가 낮아 보인다는 것이다. 키치는 본래 일부러 조악하거나 유머러스한 요소를 활용하는데, 이를 절묘하게 조합하지 않으면 그냥 조악하기만 한 디자인이 될 수도 있다. 서비스가 전달하려는 메시지가 흐려지고, 결과적으로 개성이 약해질 가능성이 크다. 내가 했던 화면이 다 그렇다.
2. 미흡한 화면 그리드 및 규칙
서비스에 있어 사용자 입장에서 볼 때, 가독성이 떨어지는 건 매우 치명적이다. 게다가 화면 그리드까지 제대로 안 잡혀있어, 전체적인 정돈감이 부족하다. 키치한 디자인이 원래 규칙을 깨는 느낌이긴 하지만, 그 안에서도 기본적인 UX 원칙(그리드, 가독성, 사용성 등)은 유지하는 게 중요하다. 나는 저 화면 디자인에서 규칙이 세워졌는지에 대한 답을 내놓지 못한다. 웹으로 디자인한다고 했는데, 1080px도,1440px도 아니다.(레전드)
물론 짧은 시간이라 그리드 및 규칙을 세우는 데엔 무리가 있을 수 있다. 그래도 기본 중에 기본은 지켜야...
3. 미흡한 색상 대비
마지막 페이지를 보면, 노란색 배경을 띈 카드 위에 검은색 타이포를 배치한 것을 볼 수 있다. 저기 화면.. 문제가 많다. Contrast Finder를 돌려보면, 혼날 것이다. Contrast-Finder(웹디자이너가 웹사이트의 가독성을 개선하는 데 사용할 수 있도록 디자인되었다.) 는 웹 접근성 기준에 적합하도록 명암이 충분히 대비되는 색의 조합을 찾아준다.
https://app.contrast-finder.org/?lang=ko
WCAG에 의하면 글자는 최소 4.5 (큰 글자의 경우 3) 이상의 명암비를 가지고 있어야 하는데, 저기 화면은 대비가 약하다. 인턴을 하면서 사수분께서 최종 화면을 Contrast-Finder로 돌려보시는 모습을 본다. 그만큼 디자이너로서 기본중에 기본인 자세인데, 지켜지지 않았다.
다시 말해 2번과 3번은 가독성이라는 기본 문제를 잡지 못했다.
4. 실력 부족
나는 3d 툴 실력이 정말정말정말 미흡한데, 그걸 밀어붙여 일러스트로 만든 어설픈 필름을 프로젝트에 붙였다. 왜...그랬지 싶다. AI툴로 돌리면 10분만에 나오는 것을 1시간 이상 끙끙 붙잡고 있어 나머지 화면 디자인이 완성도가 떨어졌다. 요즘엔 디자이너 역량에 다룰 수 있는 AI 툴도 적어야 하는데, 아직 갈 길이 멀다.
아쉬움의 연속을 토로했더니, 살짝 머리가 아프기도 하다. 근데 1년이 지난 지금 그때의 문제점을 이렇게 분석할 수 있다는 것 자체가 이미 성장한 증거 아닐까? 그때는 나름 최선이라고 생각했던 선택이었을 테니까. 지금 돌아보면서 그 부분을 짚어냈다는 게 진짜 큰 발전인 것 같다고 생각한다. 리디자인해서 다시 살아날 주제도 아니긴 하다. 그래서 그냥 회고하려고 넘어갈려 한다. 리디자인까지는 아니더라도, 이번 경험을 기반으로 앞으로 더 성장할 방향을 고민하는 건 좋은 선택인 것 같아 뿌듯하다. 앞으로 디자인할 때, "이 프로젝트가 끝나고 내가 회고한다면 어떤 점이 아쉬울까?" 를 먼저 떠올려 보면 시행착오를 줄일 수 있을 것 같다.