봉윤서
안녕하세요 :) 스코어의 디자이너 봉윤서입니다.
스코어의 디자인 작업 프로세스를 설명드리면서 스코어가 전하고자 하는 운동의 새로운 경험에 대해 말씀드릴려고 합니다.
스코어가 고민한 디자인 컨셉
스코어가 중고등학생들을 위한 운동앱으로 자리잡기 위해 가장 주목한 키워드는 ‘꾸준히’ ‘재미있게’ 였습니다. 이 두가지 키워드를 중심축으로 다양한 컨셉을 떠올려보던 중, 꾸준한 지구력으로 자신의 한계를 뛰어넘는 것에서 재미를 느끼는 ‘마라톤’의 컨셉이 스코어가 전하고자하는 메시지와 너무 잘 어울릴 것이라 판단했습니다.
‘Marathon’
뿐만 아니라, 여러분도 들어 보셨겠지만, 이러한 말이 있죠
🏃🏻♂️“수능은 마라톤이다.”
중,고등학생들에게 중요한 수능도, 그들의 체력도 꾸준히 체력을 관리해서 시험/대회 당일날 최상의 컨디션을 낼 수 있게 하는 것이 중요하다는 의미를 전하고 싶었습니다.
컨셉의 시작은 디자인 구성의 시작
‘마라톤’ 컨셉을 시작으로 재미난 아이디어들을 떠올려 볼 수 있었습니다. 이를테면 ‘바통’이 있었죠. 마라톤 이어달리기 종목에서 바통을 주고받으며 결승전을 통과하는 것처럼, 앱 내에서 서로가 협력 꾸준하게 운동하게 만드는 요소로 ‘바통’을 사용해보기로 했습니다.
스코어의 디자인 시스템 : SCORE GOAL
마라톤에서 바통이 중요한 역할을 하듯, 스코어의 디자인에서도 각 요소들이 자연스럽게 연결되어야 했습니다. 이 연결을 가능하게 한 것이 바로 디자인 시스템인 SCORE GOAL이었습니다. SCORE GOAL은 스코어의 디자인 시스템을 칭하는 이름으로, 각각의 디자인 요소들이 모여 결국 스코어 서비스의 목표를 이루고자 하는 데 이바지한다는 의미를 담고 있습니다.
컬러 팔레트: 명확한 정보 구분과 활력을 주는 색상 조합 (예: 활동/휴식 상태를 구분하는 메인/서브 컬러)
타이포그래피 스케일: 정보 위계가 명확하게 드러나도록 설계된 폰트 사이즈 체계
컴포넌트 세트: 버튼, 카드, 배지 등 반복되는 UI 요소들을 재사용 가능하게 설계
예를 들어, ‘바통’ 기능의 경우 사용자가 바통을 주고받는 과정을 하이라이트 컬러의 전환, 진동 피드백으로 표현했습니다. 이는 단순한 UI 변화가 아니라, ‘함께 달리는 느낌’을 사용자에게 전달하고자 한 시도였습니다.
이런 식으로 SCORE GOAL의 요소들은 서비스 내 모든 경험을 일관되게 이어주는 연결 고리로 작동합니다.
디자이너로서 가장 신경 쓴 점은, ‘운동’이라는 다이내믹한 경험을 화면 안에 지루하지 않게 녹여내는 것이었습니다. 그래서 모든 컴포넌트는 ‘움직임’, ‘진행’, ‘목표’라는 키워드를 기반으로 디자인되었습니다. 디자인 시스템은 정적인 문서가 아니라, 계속 진화하고 팀 전체와 함께 써야 하는 ‘살아있는 툴킷’이니까요.
로고
대망의 앱을 상징하는 로고!!!!!!!!! 😵 아무래도 앱을 대표하는 로고이다보니 더 고민이 많았는데요. 스코어의 핵심 컨셉인 ‘마라톤’을 중심에 두고, 서로가 서로에게 바통을 넘겨주는 모습을 시각적으로 표현하고자 했어요.
그 과정에서 ‘SCORE’의 S 형태 안에, 바통을 주고받는 듯한 연결의 흐름을 담아냈습니다.
결국 이 로고는 단순한 심벌이 아니라,“같이 달릴 때 더 멀리 갈 수 있다”는 스코어의 철학을 담은 출발점이기도 합니다.
캐릭터 디자인
스코어에서 캐릭터는 단순한 장식 요소가 아닌, 사용자와 앱 사이의 소통을 원활하게 돕고, 서비스에 친근함을 더하는 핵심 요소로 작동합니다. 그래서 캐릭터 디자인에 있어 가장 중요하게 고려한 키워드는 바로 ‘친근감’과 ‘소통’이었습니다.
이를 위해 두 가지 접근을 시도했습니다: 1️⃣ 원색 컬러의 활용 2️⃣ 동물 캐릭터의 도입
원색 컬러는 강렬한 시각적 임팩트를 주며, 캐릭터에 역동성과 활기를 더해줍니다. 이는 운동에 대한 긍정적 에너지를 강조하고, 생동감 있는 Z세대의 정서와도 잘 어울리죠! 또한 동물 캐릭터는 귀엽고 친근한 이미지를 통해 사용자에게 정서적 호감을 유도하고, 운동에 대해 느낄 수 있는 거리감이나 부담을 자연스럽게 완화해줍니다. 결과적으로, 스코어의 캐릭터는 중고등학생이라는 주요 타깃의 개성과 감수성을 존중하면서도, 사용자 경험의 진입 장벽을 낮추는 소통의 매개체로 작동하게 되는 것입니다.
일러스트 디자인
스코어의 일러스트는 캐릭터와 함께 앱의 전체적인 분위기와 맥락을 시각적으로 풀어내는 역할을 합니다. 단순히 시각적 장식을 넘어서, ‘어떤 기능에서 어떤 경험을 하게 될지’를 사용자에게 직관적으로 안내하는 흐름 설계 도구로 작동합니다.
밝고 생동감 있는 컬러 팔레트와 함께, 일러스트 속 캐릭터들은 함께 운동하거나, 혼자 루틴을 이어가고, 피드에 운동을 공유하는 상황들을 자연스럽게 보여주는 것이죠.
이는 스코어의 핵심 기능인 “함께 운동하기”, “운동 기록을 공유하며 소통하기”의 흐름을 시각적으로 유도하기 위함입니다.
일러스트는 텍스트가 설명하지 않아도 사용자가 다음에 어떤 행동을 하게 될지 감정적으로 예측할 수 있게 도와주는 인터페이스로 작동합니다. 결과적으로, 스코어의 일러스트는 앱 전반의 리듬과 감정선을 자연스럽게 이끌어주는 배경 장치이자 사용자 여정 전체에 숨겨진 친절한 내비게이터가 됩니다.
🏃♀️ 스코어는 여전히 달리는 중입니다!
그리고 저는 그 여정을 디자인으로 함께 이어가고 있습니다.
언젠가 이 앱이 누군가의 루틴 속에서 작은 동기 부여가 되길 바라며, 오늘도 조용히 한 픽셀씩 달려봅니다.
출시 이후에는 사용자들과 함께, 팀과 함께 조금씩 달려가며 꾸준함을 디자인하는 법을 계속 배워가야겠죠 ! 😊
다음 이야기도 곧 들려드릴게요.❤️🔥
