어디서든 배우고 성장하는 삼척 온라인 교육 플랫폼
Design Concept
배움의 문을 모두에게 열다
학생과 학부모가 처음 방문해도 어떤 수업이 있고 어떻게 신청하는지 바로 이해할 수 있는 학습 공간을 디자인의 출발점으로 삼았습니다.
사이트 전반에 밝은 블루를 기본으로 두고 넉넉한 여백과 깔끔한 카드 레이아웃을 더해, 공공 교육 사업의 신뢰감과 온라인 학습의 가벼움을 함께 전달하도록 했습니다.
또한 정규수업과 오픈클래스, 커뮤니티, 마이페이지를 같은 규칙의 메뉴 구조로 정리해 수업 탐색부터 신청, 수강 내역 확인까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
메인 비주얼 메시지 슬라이드
사업 취지와 학습 환경을 세 장의 메시지로 나누어 첫 화면에서 전달했습니다.
방문자가 사이트의 목적을 바로 파악하고 수업 탐색으로 이어지도록 했습니다. -
02
주제별 학습 콘텐츠 카드
AI·미래에너지·미래헬스케어·진로·창업 주제를 해시태그와 수업 대상, 개요가 담긴 카드로 정리했습니다.
학생이 관심 분야의 수업을 한눈에 비교하고 상세보기로 이동할 수 있습니다. -
03
정규수업·오픈클래스 탭
대학 연계 정규수업과 온라인 오픈클래스를 탭으로 나누어 같은 화면에서 전환할 수 있게 했습니다.
수업 유형별 정보를 혼동 없이 확인할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#004B9C
- Sky Blue#3193E7
- Deep Blue#004B9C
- Soft Blue#7D9ADC
- Edu Green#02A152
- Light Gray#F5F5F5
- White#FFFFFF
Typography
Aa 가나다 S-CoreDream
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Sans KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Montserrat
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
모든 서브 페이지를 같은 메뉴 구조와 레이아웃 규칙으로 확장할 수 있도록 설계했습니다.
정규수업, 오픈클래스, 커뮤니티, 마이페이지가 동일한 상단 타이틀과 본문 영역 구조를 공유합니다.
수업 안내와 학습 안내 같은 정보 페이지도 같은 틀 안에서 일관되게 읽히도록 했습니다.
- Grid
- 수업 목록은 카드형 그리드로 구성해 수업 정보를 같은 순서로 비교할 수 있도록 했습니다.
- Header
- 상단에 로그인·회원가입·통합검색·전체메뉴를 모아 어느 페이지에서도 같은 위치에서 접근하도록 했습니다.
- CTA
- 각 수업 카드의 상세보기와 하단의 수업 안내·학습 안내 바로가기로 신청 동선을 이어갔습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC대분류 메뉴와 하위 메뉴를 상단에 펼쳐 정규수업·오픈클래스·커뮤니티·마이페이지를 바로 이동
MO전체메뉴 버튼 안에 같은 메뉴 구조를 담아 터치로 이동
-
Layout
PC수업 카드를 여러 열 그리드로 배치해 한 화면에서 비교
MO카드를 한 열 위주로 재배치해 스크롤만으로 확인
-
Typography
PC비주얼 메시지는 큰 제목과 보조 문구로 위계를 구분
MO제목 크기를 줄이고 줄바꿈을 조정해 가독성 유지
-
Image
PC메인 비주얼 배경 이미지를 넓게 사용
MO화면 폭에 맞춰 배경 이미지를 비율 조정
