학생의 창의 발명을 모으는 대회 안내·접수 웹사이트
Design Concept
아이디어가 모이는 무대
참가를 고민하는 학생과 학부모가 가장 먼저 찾는 일정, 자격, 제출 방법을 한 화면 안에서 빠르게 확인하도록 하는 것을 출발점으로 삼았습니다.
밝은 오렌지를 중심 컬러로 쓰고 둥근 서체와 큼직한 타이틀을 더해, 딱딱한 공모전 안내가 아닌 아이들의 아이디어를 응원하는 분위기를 만들었습니다.
또한 대회개요에서 참가규정, 유의사항, 시상안내까지 같은 구조의 섹션으로 정리해 처음 방문한 사용자도 신청까지 흐름을 쉽게 따라갈 수 있도록 설계했습니다.
Design Elements
-
01
일정·접수 중심의 첫 화면
대회명과 기간, 참가 신청하기·접수 확인하기 버튼을 첫 화면에 함께 배치했습니다.
방문자가 별도 탐색 없이 바로 신청 단계로 넘어갈 수 있습니다. -
02
평가 항목을 나눈 참가규정
예선 서류심사와 본선심사의 평가 항목과 배점을 구분해 정리했습니다.
제출 형식과 발표 방식을 단계별로 확인할 수 있습니다. -
03
학교급별 시상안내 표
고등학교부터 초등학교 저학년·유치원까지 구간별로 시상 내역을 나누어 보여줍니다.
참가자가 자신이 속한 구간만 빠르게 찾아볼 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#EB5757
- Charcoal#222222
- Mid Gray#7F7F7F
- Line Gray#E6E6E6
- Soft Gray#F7F7F7
- White#FFFFFF
Typography
Aa 가나다 Noto Sans KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Wanjunuriche
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
안내 섹션과 게시판 페이지를 같은 규칙으로 구성했습니다.
메인의 각 섹션은 제목과 본문 영역을 동일하게 맞춰 대회 정보를 일관된 순서로 읽도록 했습니다.
공지사항과 접수조회 페이지도 같은 헤더와 하단 정보를 사용해 메인과 이어지는 화면으로 느끼도록 했습니다.
- Grid
- 공지사항은 제목과 등록일을 나란히 둔 목록 구조로 최신 안내를 한눈에 볼 수 있습니다.
- Header
- 상단 메뉴에서 대회개요부터 참가신청·확인까지 모든 안내 영역으로 이동할 수 있습니다.
- CTA
- 참가 신청하기와 접수 확인하기 버튼을 메인과 하위 페이지에서 같은 위치와 형태로 반복했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 메뉴에 대회개요부터 참가신청까지 한 줄로 배치
MOMenu · 좁은 화면에 맞춰 정리한 모바일 메뉴
-
Layout
PCLayout · 일정과 규정을 넓은 폭의 섹션으로 구성
MOLayout · 시상 구간을 세로로 쌓아 읽기 쉬운 1단 구성
-
Typography
PCTypography · 대회명을 강조한 큰 타이틀
MOTypography · 줄바꿈을 고려해 크기를 조정한 타이틀
-
Image
PCImage · 대회 포스터형 비주얼과 아이콘
MOImage · 화면 폭에 맞춰 비율을 유지한 비주얼
