씨유앰앤아이 다가치학교 포트폴리오

메인 화면 기획 및 공간 이용 중심 랜딩 구성

[메인 화면 기획]

청소년이 스스로 배우고 활동하는 '자치 배움터'라는 성격에 맞춰, 메인 화면을 '함께 성장하는 기쁨' 메시지와 핵심 메뉴 세 가지에 집중하도록 기획했습니다.

학생들이 함께 공부하는 히어로 이미지 아래에 다가치학교 소개, 공간 안내도, 공간 예약 카드를 나란히 배치해

처음 방문한 청소년도 학교를 이해하고 원하는 공간을 찾아 예약까지 바로 이어갈 수 있도록 구성했습니다.

메인 디자인 시스템

[메인 디자인]

로고 속 별과 아이들 캐릭터에서 가져온 핑크·라임 그린·스카이 블루를 메인 컬러로 삼아 밝고 경쾌한 청소년 공간의 분위기를 만들었습니다.

화이트 바탕에 파스텔 톤의 둥근 블롭 도형을 은은하게 깔고, 히어로와 카드에 큰 라운드 모서리를 적용해 부드럽고 친근한 인상을 주었으며,

세 가지 컬러를 메뉴 카드에 하나씩 나눠 써서 메뉴의 구분이 색만으로도 직관적으로 읽히도록 했습니다.

콘텐츠 디자인 및 정보 구조

[콘텐츠 디자인]

소개 페이지는 주체·성장·마을·자치 네 가지 설립목적을 각기 다른 캐릭터 일러스트로 표현하고,

청소년·길잡이 교사·교육기관의 관계를 겹쳐진 원 다이어그램으로 풀어 딱딱한 운영 철학을 쉽게 전달했습니다.

공간 안내도는 실제 평면도를 브랜드 컬러 블록으로 재구성하고, 공간별 탭을 누르면 사진과 수용 인원·이용 시간이 함께 보이도록 정리해

스터디룸부터 스튜디오까지 12개 공간의 정보를 한 화면에서 비교할 수 있게 했습니다.

웹사이트 UX/UI 최적화
 

[웹사이트 UX/UI]

공간 예약은 실제 공간 사진을 썸네일로 쓴 카드 그리드로 구성해 공간 이름을 몰라도 사진만 보고 원하는 곳을 고를 수 있게 했고,

안내도의 상세 정보 하단에 '예약 바로 가기' 버튼을 두어 정보 확인에서 예약까지 동선을 짧게 연결했습니다.

모든 서브페이지에 '뒤로가기' 버튼을 배치하고 모바일에서는 카드를 2열로 재배치해

휴대폰으로도 편하게 공간을 둘러보고 예약할 수 있도록 했습니다.