본문 바로가기
20Springs

20Springs 서비스 컬러를 개발 전에 먼저 정한 이유

by 스무봄 2026. 10. 1.
반응형

어떤 서비스를 만들지 모두 정한 것은 아니었지만, 20Springs가 사람들에게 어떤 인상으로 다가가야 하는지는 먼저 생각해 보고 싶었다. 그래서 서비스 개발을 시작하기 전에 컬러부터 정해 보기로 했다.

법인 설립을 마치고 서비스를 준비하기 시작하면서 바로 개발부터 해야 할지 고민했다. 만들고 싶은 기능은 아직 구체적으로 정리하는 중이었고, 화면 구성도 정해진 것이 없었다.

그런데 준비 없이 개발부터 시작하면 필요한 기능을 구현하는 데만 집중하게 되고, 스무봄이 전하려는 분위기와 정체성은 뒤로 밀릴 수 있겠다는 생각이 들었다. 완성된 디자인 시스템을 만드는 단계는 아니더라도 서비스가 어떤 모습으로 사람들을 만나야 하는지 기준은 먼저 세워 두고 싶었다.

그래서 첫 화면을 만들기 전에 20Springs의 서비스 컬러부터 정해 보기로 했다.

법인 이름에 담은 의미를 색으로도 이어가고 싶었다

스무봄이라는 이름에는 한 아이가 성년이 될 때까지 스무 번의 봄을 함께한다는 의미를 담았다. 개인의 일회성 후원을 넘어 오랫동안 지속할 수 있는 구조를 만들고 싶다는 법인 설립의 목적도 이 이름과 연결돼 있다.

20Springs의 색도 그 의미에서 출발해야 한다고 생각했다. 단순히 내가 좋아하는 색이나 요즘 자주 보이는 색을 고르기보다 스무봄이 중요하게 여기는 가치를 화면에서 느낄 수 있어야 했다.

컬러를 찾기 전에 먼저 표현하고 싶은 인상을 정리했다.

  • 후원과 자산에 관한 정보를 안심하고 볼 수 있는 신뢰감
  • 한 사람과 오래 함께한다는 지속성
  • 봄이라는 이름에서 느껴지는 따뜻함과 희망
  • 시간이 지나며 함께 자란다는 성장

금융 정보처럼 차분하고 믿을 수 있어야 하지만, 너무 딱딱하거나 차갑게 보이고 싶지는 않았다. 반대로 후원의 따뜻함만 강조해 가볍게 느껴지는 것도 피하고 싶었다. 신뢰와 온기를 한 화면 안에서 함께 표현하는 것이 이번 컬러 선택의 가장 중요한 기준이었다.

디자인 전문가가 아니어서 AI에게 후보를 요청했다

나는 브랜드나 디자인을 전문적으로 공부한 사람이 아니다. 색마다 어떤 인상을 주는지 막연하게 떠올릴 수는 있었지만, 그 생각을 실제 서비스에서 사용할 수 있는 조합으로 만드는 일은 쉽지 않았다.

그래서 법인을 만든 목적과 스무봄이라는 이름의 의미, 서비스가 전했으면 하는 인상을 정리해 AI에게 전달했다. 한 가지 정답을 골라 달라고 하기보다 여러 컬러 조합을 제안하고, 각 색을 선택한 이유와 화면에서 맡을 역할도 함께 설명해 달라고 요청했다.

AI는 비슷해 보이는 색도 역할에 따라 나누어 제안했다. 브랜드를 대표하는 색, 금융 정보를 안정적으로 보여 주는 색, 버튼과 중요한 행동에 사용할 색, 배경과 본문에 사용할 색을 구분해서 보니 단순히 ‘예쁜 색 하나’를 고르는 문제와는 달랐다.

AI가 색을 대신 결정한 것은 아니다. 후보와 설명을 빠르게 넓혀 보는 데 도움을 받았고, 그중 어떤 조합이 20Springs의 의미에 가까운지는 내가 다시 판단했다.

처음 생각한 네이비와 골드만으로는 부족했다

처음에는 네이비와 골드를 중심으로 생각했다. 네이비는 금융 정보에 필요한 신뢰와 안정감을 주고, 골드는 따뜻한 봄빛과 희망을 표현하기 좋았다.

하지만 두 색을 중심에 놓으면 금융회사나 투자 서비스 같은 인상이 강해질 수 있었다. 20Springs는 금융 구조를 활용하지만, 이용자가 최종적으로 느껴야 하는 가치는 투자보다 생명과 성장, 긴 동행과 따뜻한 신뢰에 더 가까웠다.

그래서 네이비의 비중을 낮추고 봄과 성장의 의미를 담은 그린을 대표색으로 올렸다. 네이비는 없애지 않고 자본, 배당과 공시처럼 신뢰가 중요한 영역을 받치는 색으로 남겼다. 노랑과 코랄은 화면 전체를 채우기보다 새로운 후원이나 목표 달성처럼 따뜻한 순간을 보여 주는 포인트 컬러로 사용하기로 했다.

정리하면 컬러의 역할은 다음 문장으로 설명할 수 있었다.

포레스트는 성장, 네이비는 영속성, 따뜻한 포인트 컬러는 자본이 만들어 낸 새로운 봄을 의미한다.

최종 후보로 ‘Clear Spring’ 팔레트를 정했다

여러 색을 조정한 끝에 Clear Spring이라는 이름의 팔레트를 정했다. 대표색은 새잎과 깊은 잎을 떠올리게 하는 두 가지 그린이다. 맑은 네이비가 금융 정보의 신뢰를 보완하고, 봄볕 옐로와 복숭아꽃 코랄이 서비스의 따뜻한 순간을 강조한다.

배경과 카드에는 밝은 아이보리, 화이트, 민트와 블루를 사용해 화면이 무겁지 않도록 했다. 본문과 구분선에는 채도를 낮춘 그레이를 사용하고, 오류나 주의가 필요한 상태를 위한 코랄 레드도 따로 두었다.

역할 컬러명 HEX 사용하려는 곳
주요 브랜드 새잎 그린 #2E7D5B 주요 버튼, 활성 상태, 대표 브랜드 영역
주요 브랜드 깊은 잎 그린 #285F52 로고와 짙은 브랜드 영역
보조 브랜드 맑은 네이비 #24465F 제목, 금융 데이터, 공시와 푸터
포인트 봄볕 옐로 #F4B942 성과, 목표 달성, 중요한 강조
포인트 복숭아꽃 코랄 #FFB38A 동행 기록, 감사 메시지, 따뜻한 콘텐츠
서브 새싹 민트 #E8F6EF 진행 상태와 정보 카드 배경
서브 샘물 블루 #DDEFF4 차분한 정보 영역과 보조 배경
배경 햇살 아이보리 #FFFFC6 따뜻한 강조 배경
배경 화이트 #FFFFFF 카드와 기본 화면
중립 민트 그레이 #D8E5DF 테두리와 구분선
중립 리프 그레이 #64746D 보조 설명과 날짜
상태 코랄 레드 #C65353 오류와 주의 상태

이 팔레트의 중심은 그린이지만 화면을 초록색으로만 채우려는 것은 아니다. 아이보리와 화이트 같은 중립색을 가장 넓게 사용하고, 그린은 브랜드를 인식시키는 영역에 집중한다. 네이비는 재무 정보에, 옐로와 코랄은 사용자가 주목해야 할 순간에 제한적으로 사용하는 구조다.

같은 색도 화면에 따라 역할을 나누기로 했다

색마다 이름과 의미를 붙이는 것만으로는 실제 서비스에서 사용할 수 없다. 어느 화면에서 어떤 색을 중심에 둘지도 함께 정리했다.

화면 중심 색 적용 방향
홈 그린 + 밝은 배경 대표 메시지, 주요 행동과 최신 동행
임팩트 네이비 + 그린 자본과 후원의 흐름, 숫자와 차트
동행 그린 + 코랄 성장 기록, 사진과 이야기
커뮤니티 그린 + 민트 응원, 질문과 활동 피드
재무·공시 네이비 + 화이트 보고서, 거래와 집행 내역
배당 알림 옐로 + 네이비 새로운 배당과 후원 발생 강조

그린은 생명과 성장, 시간이 지나며 쌓이는 가치를 표현한다. 네이비는 법인과 영속 자본, 재무 데이터의 신뢰를 담당한다. 옐로와 코랄은 한 화면에서 동시에 넓게 사용하지 않고, 사용자가 주목해야 하는 행동이나 상태 한 가지에 집중하려 한다.

차트도 증권 앱처럼 상승은 초록, 하락은 빨강으로 단순하게 표시하기보다 후원 흐름의 의미에 따라 색을 정할 생각이다. 자본, 누적 배당, 집행된 후원과 운영비가 같은 의미의 색을 계속 유지해야 정보를 더 쉽게 이해할 수 있기 때문이다.

컬러를 정했다고 디자인이 끝난 것은 아니다

이번에 정한 Clear Spring 팔레트는 서비스를 만들기 위한 출발점이다. 아직 홈 화면이나 버튼, 카드와 차트에 충분히 적용해 본 결과가 아니기 때문에 실제 개발 과정에서 밝기와 사용 비율은 달라질 수 있다.

화면을 만들면서는 다음 항목을 확인하려 한다.

  1. 본문 글자와 배경이 모바일 화면에서 편하게 읽히는가
  2. 버튼과 버튼 안의 글자가 충분히 구분되는가
  3. 옐로와 코랄 위에 어두운 글자를 사용했을 때 가독성이 확보되는가
  4. 금액과 숫자, 차트의 정보를 색만으로 구분하고 있지는 않은가
  5. 성공, 주의와 오류 상태에 아이콘과 문구가 함께 제공되는가
  6. 실제 모바일 기기와 밝은 야외에서도 색과 글자가 잘 보이는가
  7. 로고, 문서와 SNS 이미지에서도 일관되게 사용할 수 있는가

색의 의미를 정해 두었다는 이유만으로 사용하기 좋은 색이 되는 것은 아니다. 본문과 배경의 명도 대비를 확인하고, 색각 특성이 다른 사람도 정보를 이해할 수 있도록 차트에 범례와 직접 레이블을 함께 제공해야 한다.

화면에 적용했을 때 읽기 어렵거나 지나치게 밝게 느껴진다면 색상 코드와 사용 비율을 바꿀 생각이다. 처음 정한 색을 끝까지 지키는 것보다 실제 서비스에서 편하게 사용할 수 있는 조합을 만드는 것이 더 중요하다.

개발 전에 컬러를 정하며 얻은 기준

처음에는 서비스를 구체적으로 기획한 뒤 색을 정하는 순서가 자연스럽다고 생각했다. 하지만 컬러를 먼저 고민하면서 20Springs가 어떤 인상을 주어야 하는지 말로 정리할 수 있었다.

처음 생각했던 네이비와 골드를 완전히 버리지는 않았다. 다만 그린을 대표색으로 옮기고 네이비와 따뜻한 포인트 컬러의 역할을 분리하면서, 금융회사처럼 보이지 않으면서도 신뢰를 잃지 않는 방향을 찾았다.

물론 지금의 팔레트가 그대로 최종 결과가 되지는 않을 수 있다. 서비스를 직접 만들고 화면에서 확인하면서 색을 덜어 내거나 바꿀 수 있다. 그 변화도 실패라기보다 20Springs에 맞는 모습을 찾아가는 과정이라고 생각한다.

이번에는 20Springs가 어떤 인상으로 사람들을 만나야 하는지 색으로 먼저 정리했다. 이제 이 컬러를 실제 화면에 적용하면서 어떤 서비스를 만들 것인지 더 구체적으로 정해 볼 차례다.

20Springs 서비스

  • 다음 글: 20Springs의 첫 서비스 기획과 화면 만들기
  • 전체 목차: 20Springs

관련 글

  • 법인 설립 여정을 마치며 - 도메인 구입과 서비스 개발의 시작

이 글에 소개한 컬러는 서비스 개발 전에 정한 초기 팔레트입니다. 실제 화면의 사용성, 가독성과 접근성을 확인하는 과정에서 색상 코드와 사용 방식은 변경될 수 있습니다.

반응형