배지 기능이 추가됐어요

오랜만에 업데이트 소식을 들고왔어요. 그동안 열심히 일도 하고, 기록도 하고, 자잘한 업데이트는 계속 해왔는데요. 이번에는 배지 기능을 추가하고, 꽤 괜찮은 UI/UX 개선을 해서 왔습니다. 특히 배지 기능은 예전부터 꾸준히 하고 싶은 마음이 있었는데 이렇게 소개하게 되어 기쁘네요.

어울리는 배지 디자인을 찾아서

저는 여러분이 Sprinters 활동을 오래, 그리고 계속할 수 있게 만들고 싶어요. 여러 고민 끝에 고안해낸 것 중 하나가 바로 배지 기능이에요. 그런데 배지 디자인을 만드는 게 꽤 어렵더라구요. 디자인은 제 전문 분야도 아니고, 어울리는 디자인을 만들기가 어려웠어요.

가장 처음으로 생성한 배지 디자인이에요. 잉크 스탬프 느낌으로, 글쓰기에 어울리는 디자인이긴 하지만 뭔가 임팩트가 없는 느낌이죠.

3D 배지로도 가보려고 했어요. Sprinters보다는 커머스 도메인에 어울리는 디자인이지 않나요? 그래서 이것도 탈락.

금속 테두리 덕분에 정말 배지 느낌이 나요. 하지만 어울리는지는 모르겠단 생각이 들었습니다. 이때는 '아..갈 길이 정말 멀겠구나'라는 생각을 했습니다.

초안 결정

그렇게 아이콘 형태로 만들기도 하고, 계속 생성하는 것을 반복하다가 G3 각진 인장형을 초안으로 잡고 디벨롭 해보기로 합니다.

현재 제가 획득한 배지 목록이에요. 개인적으로는 현재 디자인과 잘 어울린다고 생각하는데, 어떤가요? 여기서 하나의 배지에 단계가 적용된 게 있는데 그것도 소개해 드릴게요.

등급이 있는 배지

누적 접속일마다 배지가 바뀌는 "함께한 날" 배지를 예시로 들어볼게요. 위 스크린샷처럼 누적 접속일마다 새로운 스타일의 배지를 받을 수가 있어요.

현재는 10개의 배지가 준비되어 있는데요. 앞으로도 계속 추가될 예정입니다.

번외

스티커 형태도 생각을 해봤어요. 개인적으로 마음에 들긴 했지만, 현재 디자인이나 분위기에는 어울리지 않는 것 같아서 이것도 제외를 하게 되었습니다.

UI/UX 개선

UI도 은근 변경된 부분이 많습니다. 특히 기록 상세에서 읽기 경험을 좀 더 개선시켜보았어요. 기존 화면부터 보시죠.

저는 상세 글에는 목차가 필요하다고 생각해요. 한 번 읽고, 나중에 이해 안 되는 부분이 있을 때 목차를 보고 확인하면 좋거든요. 다만, 이게 계속 표시되어 있다보니 거슬리는 사용자도 있을 거란 생각이 들었어요. 그리고 개인적으로 좌우 밸런스가 맞지 않아 보였어요. 왼쪽의 사이드바를 펼치면 더 그래 보였죠.

그래서 목차의 톤을 낮추고, 편의성을 높여보기로 했어요.