언어와 문법의 장벽을 허물다

호랑에듀는 한글 코딩으로 언어와 문법의 장벽을 낮추고, 누구나 컴퓨팅 사고력을 기를 수 있는 교육 경험을 만들어온 스타트업입니다.
2024년 4월부터 약 3개월간 디자인 헤드로 합류해, 한글 코딩을 넘어 컴퓨팅 사고력을 키우는 교육이라는 방향성이 브랜드와 UI 전반에 선명하게 드러나도록 브랜딩, 디자인 시스템, UI·UX 리뉴얼을 주도했습니다.

중괄호를 걷어내고, 흐름은 더 자연스럽게

기존 로고에서 가장 먼저 덜어낸 것은 중괄호였습니다.
문법을 상징하는 중괄호는 코딩의 진입장벽을 낮추고자 하는 호랑에듀의 방향성과 충돌한다고 보여 중괄호를 제거하고, 끊어져 있던 한글 글자들을 하나의 흐름으로 재조합해 언어와 문법의 경계를 넘어 컴퓨팅 사고력이 자연스럽게 확장되는 브랜드 이미지를 구축했습니다.

확장 가능한 브랜드 시스템 설계

호랑에듀의 브랜드가 제품, 콘텐츠, 마케팅 전반에서 일관되게 확장될 수 있도록 컬러와 로고 시스템을 구축했습니다.
각 컬러에는 브랜드 가치에 맞는 의미를 부여하고, 로고 조합과 오용 사례를 함께 정의해 누구나 같은 기준으로 브랜드를 사용할 수 있도록 했습니다.

단아, 호랑에듀 디자인 라이브러리

새로운 브랜딩을 제품 경험으로 확장하기 위해 호랑 리뉴얼에 적용된 디자인 라이브러리, 단아를 2024년 7월 22일 Figma Community에 공개했습니다.
아이들부터 선생님까지, 다양한 사용자가 같은 제품 안에서 각자의 목적을 자연스럽게 달성할 수 있도록 높은 접근성, 쉬운 사용성, 일관된 UX, 빠른 개발 환경을 기준으로 라이브러리를 설계했습니다.

• WCAG 3 (APCA) 기반 색 체계
  단순히 보기 좋은 조합을 넘어, 더 많은 사용자가 같은 정보를 또렷하게 읽을 수 있도록 WCAG 3의 APCA 기준을 바탕으로 대비와 가독성을 설계했습니다.
• 최대 2배까지 글자 크기 조절
  글자를 크게 읽어야 하는 사용자도 화면의 흐름을 잃지 않도록, 최대 2배까지 확장되는 타이포 스케일을 기준으로 레이아웃과 컴포넌트의 대응 방식을 설계했습니다.
• Atomic Design 기반 설계
  작은 요소부터 복잡한 화면까지 같은 규칙으로 확장될 수 있도록, Atomic Design 구조를 기반으로 컴포넌트를 설계해 일관된 경험과 빠른 제품 개발이 가능하게 했습니다.

실제 서비스 클론을 활용한 확장성 검증

단아는 실제 서비스들 위에서 검증하며 설계되었습니다.
컬러와 타이포그래피 같은 기초적인 토대를 설계할 때부터 익숙한 서비스 화면들을 클론해 테스트했고,
그 과정에서 대한민국 디지털교과서 가이드라인과 WCAG 접근성 기준을 충족하는지 확인했습니다.
또한 컴포넌트를 Atomic Design 구조로 확장하며, 단아가 다양한 제품 경험 안에서도 일관되게 작동할 수 있는지 검증했습니다.

브랜딩의 마지막 목적지, 프로덕트 UI

새로운 호랑에듀의 브랜딩과 디자인 라이브러리는 실제 학습 화면 안에서 하나의 경험으로 연결됩니다.
책을 읽듯 자연스럽게 이어지는 시선 흐름을 기준으로 학습 콘텐츠와 코드 에디터의 구조를 재정리하고,
명확한 네비게이션과 액션 흐름을 통해 사용자가 지금 무엇을 해야 하는지 쉽게 이해할 수 있도록 설계했습니다.
브랜드가 말하는 쉬운 코딩 교육이 실제 화면에서도 작동하도록, 제품 경험 전반을 더 간결하고 일관된 방향으로 고도화했습니다.