01.
정직한 여백
절제된 공간을 통해 브랜드의 본질이 선명해집니다.
rich class
시장의 파도를 타는 법을 배웁니다, 리치클래스
복잡하고 방대한 금융 데이터를 유저 중심의 깔끔하고 직관적인 UI로 정돈했습니다. 시각적 노이즈를 최소화한 레이아웃을 통해 사용자가 화면에 진입하는 순간 필요한 강의 정보와 핵심 지표를 인지적 부하 없이 파악할 수 있도록 설계했습니다.
철저히 계산된 화이트 스페이스(여백)와 정교한 그리드 시스템을 바탕으로 정보의 가독성을 극대화하여, 복잡한 투자 이론도 지루함 없이 끝까지 몰입할 수 있는 최적의 온라인 러닝 환경을 제공합니다.
- Project
- 온라인강의 플랫폼
- Role
- Website
- Period
- 2025.11 – 2026.12
신뢰와 혁신을 완성하는 4가지 키워드
강의 목록을 나열하는 데 그치지 않고, 수강생이 콘텐츠의 깊이를 화면에서 바로 체감할 수 있는 인터페이스에 집중했습니다. 체계화된 정보 계층과 일관된 학습 동선을 통해 첫 방문에서 수강 신청까지의 흐름이 끊기지 않도록 설계했습니다.
02.
정교한 설계
복잡한 투자 이론이 명료한 구조로 정리됩니다.
03.
역동적 흐름
감각적인 인터랙션으로 정보에 생동감을 더합니다.
04.
무결한 확장
유동형 레이아웃 위에서 전문성이 완벽히 연결됩니다.
정보 전달에 확실한 프리텐다드
불필요한 요소를 배제한 정제된 형태와 높은 가독성을 바탕으로, 콘텐츠와 정보 전달에 집중할 수 있는 화면을 만들기 위해 프리텐다드 폰트를 사용했습니다.
RICH CLASS
시장의 파도를 타는 법을 배웁니다, 리치클래스
BoldFont Weight
H2 H3Html Tag
-2.5%Letter Spacing
46 38Font Size
RICH CLASS
시장의 파도를 타는 법을 배웁니다, 리치클래스
MediumFont Weight
H4 H5 PHtml Tag
-2.5%Letter Spacing
24 20 18Font Size
RICH CLASS
시장의 파도를 타는 법을 배웁니다, 리치클래스
RegularFont Weight
A SPAN BUTTONHtml Tag
-2.5%Letter Spacing
18 16 14Font Size
화사함 속에 담아낸 시각 위계
깔끔한 라이트 톤앤매너를 유지하면서 오렌지 컬러를 전략적으로 배치해 사용자의 시선 흐름을 유도했습니다. 밝은 화면에서도 빛 번짐이나 피로감 없이 기능적으로 작용할 수 있도록 컬러 밀도를 조절하였고, 이를 통해 정보의 가독성과 인터페이스의 심미성을 동시에 확보했습니다.
Hex Code:#0077FF
Hex Code:#09A625
Hex Code:#FF5715
Hex Code:#000000
Hex Code:#767676
RICH CLASS MAIN PAGE
어떤 강의를 먼저 보아야 할지 한눈에 판단할 수 있도록 정보의 흐름과 우선순위를 먼저 정리하고, 첫 화면에서 강의의 성격과 난이도가 바로 읽히도록 UI를 구성했습니다.
SUB PAGE
커리큘럼과 강사 정보, 수강 혜택을 카드 단위로 모듈화해 긴 상세 페이지에서도 원하는 항목을 바로 찾을 수 있게 했습니다. 결제로 이어지는 버튼은 스크롤 어디에서나 닿을 수 있도록 배치해 이탈 지점을 줄였습니다.
