"환경에 구애받지 않는 양질의 수학 교육을 위하여"
방치된 정보의 나열에서 학습자 중심의 시스템으로, MathHub의 정체성을 재정립한 팀 프로젝트
기존 mathhub 링크 : https://mathhub.io/
1. Diagnosis & Leadership: 프로젝트의 시작
프로젝트 전반의 혼선을 방지하고 효율적인 협업을 위해 시스템의 기틀을 마련함.
- 디자인 시스템 선구축: 팀원 간 디자인 파편화를 방지하기 위해 리디자인 방향성을 설정하고 디자인 가이드를 최우선으로 정립.
- 정체성 혼란 해결: 중구난방이던 카테고리를 '국내 중·고등학생' 중심으로 재편하고, 글로벌 자료는 별도 섹션으로 분리하는 전략 수립.
- UI 불친절 개선: 기계적인 나열에서 벗어나 학습자의 미감과 편의를 고려한 UX 전략 제시.
2. My Contributions: 주요 수행 업무
팀의 중심에서 전체 흐름을 조율하는 동시에, 학습 경험의 핵심인 이론(개념) 파트의 설계를 전담함.
2.1 이론 리스트 및 개념 학습 페이지 디자인
- 이론 리스트: 초기 카드형의 시각적 피로도를 해결하기 위해 일자형 리스트로 선회. 폰트 위계 강화 및 검색 기능을 추가해 접근성 극대화.
- 개념 학습 페이지: 학습 흐름을 끊지 않도록 UI를 배치하고, 정답 숨기기 토글 등 실질적인 학습 보조 기능을 구현.
2.2 프리젠테이션
- 발표 자료 제작 및 스피커: 프로젝트의 논리적 근거(문제 진단, 벤치마킹, 기대 효과)를 담은 최종 발표 자료를 제작하고 직접 발표를 진행함.
3. Design Guideline (Standardized for Team)
협업의 효율을 높이기 위해 팀원과 정립한 가이드라인.
🎨 Color System
- Point Blue (#2C4578): 주요 버튼(CTA)과 핵심 포인트 요소에 사용
- LIght Blue (#C5DCFF): 사이트의 전체적인 배경과 메인 톤을 담당
- Blue Green (#31BCEB): 글로벌 페이지 컬러
- Back Gray (#999999): 기본 선(Border)과 보조 텍스트에 사용
Typography (Pretendard)
UI Principles
- 모든 요소에 Border Radius 10px 적용 및 Chevron 스타일 아이콘 통일로 브랜드 일관성 유지.
4. Responsive & Expected Effects
- 모바일 최적화: 터치 오작동 방지 및 텍스트 시인성 확보를 위한 UI 조정.
- 기대 효과:
- 협업 효율 향상: 디자인 가이드 준수로 작업물 통합 시간 단축.
- 학습 몰입도 강화: 정돈된 UI와 학습 보조 기능으로 플랫폼 신뢰도 상승.
결과보고서
https://docs.google.com/presentation/d/1IBzwV5jGWABh4qam55XnBMvs4s5KNVEm_VbyJ9a7MG4/edit?usp=sharing
mathhub 리디자인 결과보고서
이 브라우저 버전은 더 이상 지원되지 않습니다. 지원되는 브라우저로 업그레이드하세요.
docs.google.com
'디자인' 카테고리의 다른 글
| [Banner Design] <밤 사이 피어난 기분 좋은 꿈> 몽환적인 봄 프로모션 배너 (0) | 2026.04.14 |
|---|---|
| [Poster Design] <박보검의 감사한 밤> 라디오 배너 제작기 (0) | 2026.04.13 |
| [Poster Design] 어도비 파이어플라이로 만든 ‘치즈베이글’ 포스터 제작기 (0) | 2026.04.12 |
| [Poster Design] 웹툰 <가비지타임> 실사판 포스터 제작기 (Feat. Adobe Firefly) (0) | 2026.04.06 |
| [Poster Design] 웹툰 <만취남녀> 실사판 포스터 제작기 (Feat. Adobe Firefly) (0) | 2026.03.30 |