본문 바로가기
목록으로
목록으로

인천광역시교육청 설계공모 심사시스템

MOBILE & WEB DESIGN

인천광역시교육청
설계공모 심사시스템 구축

프로젝트 요약 설계공모 심사시스템 신규 UI/UX 디자인 및 반응형 퍼블리싱
작업 기간 2023.08.01 ~ 2024.01.20 (약 6개월)
담당 범위
디자인
100%
퍼블리싱
100%
작업 환경 Photoshop, Illustrator, HTML5, CSS3, JS, jQuery
적용 표준 웹 접근성 지침(WAH) 준수 및 모바일 반응형 웹
사이트 링크 홈페이지 방문 🔗
PC 메인
모바일 메인
PROJECT CONCEPT

프로젝트 기획 의도 및 목표

교육시설 설계공모의 전 과정을 통합하는
투명하고 스마트한 온라인 플랫폼 구축.

인천광역시교육청의 교육시설 설계공모 과정을 디지털화하여 참가 등록, 질의응답, 작품 제출 및 심사 결과 확인까지 모든 단계를 하나의 온라인 시스템에서 통합 관리할 수 있도록 신규 구축한 프로젝트입니다.

복잡한 공모 일정을 직관적으로 인지할 수 있는 대시보드를 제공하고, 과거 당선작 데이터를 체계적으로 축적하는 아카이빙 환경을 마련하여 심사의 투명성과 사용자 편의성을 동시에 확보하는 데 집중했습니다.

CORE REQUIREMENT

핵심 구축 방향

복잡한 일정의 시각적 단순화와
체계적인 데이터 아카이빙.

기획 방향일정 관리 직관화
구현 목표D-day 대시보드 UI
01. TIMELINE DASHBOARD

공고별 접수 기간과 잔여 일정을 메인 화면에 대형 뱃지로 강조하여, 참가자가 핵심 일정을 놓치지 않도록 접근성을 높였습니다.

기획 방향탐색 효율성 강화
구현 목표진행 단계 테이블 구조화
02. PROCESS TABLE

참가 등록부터 최종 심사일까지 이어지는 복잡한 단계를 하나의 테이블 라인에 정교하게 배치하여 전 과정을 한눈에 파악할 수 있게 설계했습니다.

기획 방향데이터 가치 창출
구현 목표시각적 갤러리 아카이빙
03. VISUAL ARCHIVING

우수한 건축 조감도를 갤러리 형태의 그리드로 제공하고, 상세 페이지 내에서 심사평과 도면을 원스톱으로 조회할 수 있도록 구조화했습니다.

DESIGN STRATEGY

어떤 기준으로 설계했는가

신뢰감을 주는 공공기관의 블루 톤과
콘텐츠 몰입도를 높이는 클린 레이아웃.

인천광역시교육청의 아이덴티티를 반영한 네이비와 블루를 메인 컬러로 사용하여 공공 심사 플랫폼으로서의 공정성과 신뢰감을 부여했습니다. 방대한 텍스트와 도면 데이터가 혼재하는 시스템 특성을 고려해, 여백을 충분히 활용한 클린 레이아웃으로 건축 콘텐츠 자체에 시선이 집중되도록 디자인했습니다.

TRUST공공의 신뢰성
CLARITY명확한 데이터 정돈
GALLERY콘텐츠 중심 시각화
ICE ARCHI통합 설계공모 플랫폼
WEB DESIGN : HOME

D-day 카운트다운 중심 공모현황 대시보드 UI

진행 중인 설계공모의 접수 기간과 D-day 잔여일을 대형 뱃지로 강조하여 핵심 일정을 직관적으로 파악할 수 있게 설계했습니다. 하단에는 당선작 슬라이드를 탑재하여 신뢰감 높은 공공 심사 플랫폼 이미지를 연출했습니다.

인천광역시교육청 설계공모 심사시스템 메인 대시보드 UI
WEB DESIGN : NOTICE LIST

단계별 접수 일정을 한눈에 보는 정교한 공모현황 테이블

참가등록부터 심사일까지 복잡한 전체 진행 과정을 한 줄의 테이블 구조로 정돈했습니다. 상단 통합 검색 영역과 D-day 뱃지 노출을 통해 사용자가 원하는 마감 임박 공모를 신속하게 인지하고 탐색할 수 있습니다.

설계공모 목록 및 일정 테이블 UI
WEB DESIGN : ARCHIVING

당선작 3D 조감도 중심의 카드형 아카이빙 갤러리

역대 교육시설 설계공모 당선작을 시각적으로 감상할 수 있는 갤러리 페이지입니다. 대형 건축 조감도 썸네일과 함께 발주기관, 업체명 등 핵심 실적 데이터를 명확히 표기하여 고품질 건축 정보의 시독성을 극대화했습니다.

건축설계공모 아카이빙 카드형 그리드 UI
MOBILE DESIGN

디바이스 환경을 고려한 유연한 반응형 UI/UX

다양한 모바일 해상도에서도 깨짐 없는 인터페이스를 제공합니다. 메인 대시보드의 D-day 카드와 아카이빙 그리드 레이아웃이 화면에 맞춰 1열 구조로 자연스럽게 재배치되어 스마트폰 환경에서도 편리하게 조회할 수 있습니다.

모바일 메인 화면
모바일 아카이빙 서브 화면

공모 개요부터 도면까지 원스톱 데이터 시각화 상세 UI

개별 공모의 종합 결과를 투명하게 제공하는 원스톱 상세 조회 페이지입니다.
공모 개요, 심사평, 3D 조감도 및 도면 데이터 등을 체계적으로 정돈하여 방대한 건축 정보를 직관적으로 탐색할 수 있습니다.

설계공모 상세 아카이빙 종합 정보 화면
FULL DATA SYSTEM

체계적인 데이터 분할 및 심사 결과 투명화

상단 공모 개요표를 시작으로 심사위원 명단, 종합 심사평, 입상 결과, 당선작 도면 갤러리를 세로 스크롤 흐름으로 배치했습니다. 방대한 건축 정보와 심사 결과를 시각적으로 명확하게 구분하여 사용자가 원하는 데이터를 빠르게 파악하도록 사용자 경험을 최적화했습니다.