ISSUE 01
친근하지 못한 데이터
전문용어 중심 정보 제공 · 데이터와 그래프 중심 화면 · 정보는 있지만 해석이 어려움
데이터를 보여주는 것보다
이해시키는 것이 중요함
- 세 시안의 공통 해법
- 수치 옆에 상태 배지와 평이한 문장을 함께 노출. 색과 텍스트를 병기해 색맹 사용자도 상태를 판단할 수 있게 처리 (KWCAG 5.3.1)
01
출발점 · 기획 UX 시사점을 어떻게 화면으로 옮겼는가
‘정보 제공 중심 포털’에서 ‘사용자 문제 해결 중심 플랫폼’으로. 기획 단계에서 정의된 세 가지 시사점을, 세 시안이 각각 어떤 화면 장치로 해결했는지 정리했습니다.
ISSUE 02
사용자는 메뉴가 아닌 ‘답’을 찾고 있음
메뉴 중심 탐색 구조 · 공급자 중심 IA 체계 · 검색 및 개인화 기능 부족
메뉴를 탐색하지 않고 검색과
직관적인 메뉴명으로 ‘답’을 찾게 함
- 세 시안의 공통 해법
- 검색을 첫 화면의 주 동선으로 승격하고, 이용 빈도 상위 서비스를 바로가기 8종으로 노출해 도달 단계를 줄임
ISSUE 03
생활 속에서 활용되지 못하는 서비스
모바일 이용 증가(33%) · 현장에서 즉시 정보 확인 어려움 · 실시간 데이터 확인 어려움
Mobile First 기반의
생활 밀착형 서비스로 전환 필요
- 세 시안의 공통 해법
- 우리 동네 물정보(위치기반 지표)와 긴급 알림을 메인에 상설 배치. 모바일에서는 이 두 가지를 상단으로 재배치
세 시안 모두 위 세 가지를 충족합니다. 차이는 품질이 아니라 ‘무엇을 먼저 보여줄 것인가’의 순서에 있습니다. 그래서 오늘 결정하실 것은 ‘어느 것이 더 잘 만들어졌는가’가 아니라, ‘우리 포털이 국민에게 무엇을 먼저 말할 것인가’입니다.
02
세 가지 답
A안 · 브랜드 감성형
GRADIENT · GLASSMORPHISM검색 한 번, 내 위치 한 번으로 흩어진 물 정보를 좁혀주는 화면
- 특장점
-
- HERO 통합 배치 — 검색창과 우리 동네 지표를 첫 화면 한 곳에 모아, 스크롤 없이 내 지역 정보에 도달
- 물의 흐름 그라데이션 + 글래스모피즘 — ‘투명하고 신뢰할 수 있는 물’이라는 브랜드 인상을 시각으로 전달
- 리뉴얼 체감도가 가장 큼 — 개편 전후 인상 차이가 명확해 대외 홍보에 유리
- 선택 시 함께 정할 것
- 장식 요소가 많은 만큼 유지보수 검증 항목이 늘어납니다. 반투명 배경 위 텍스트의 명도대비(KWCAG 5.3.1) 준수 및 그라데이션·일러스트 이미지 확보 등 디자인적 유지보수 활동이 늘어납니다.
- # 물의 흐름 그라데이션
- # 글래스모피즘
- # HERO 통합 배치
- # 위치기반 지표
- # 브랜드 슬로건
첫 화면 정보 노출 순서
PC
브랜드 슬로건
검색
우리동네 지표
바로가기 8종
MOBILE
브랜드 슬로건
검색
우리동네 지표
바로가기 8종
B안 · 기능 중심형
KRDS · SEARCH FIRST검색을 화면 중앙에 단독으로 놓아 ‘찾는 행위’를 첫 동선으로 삼는 화면
- 특장점
-
- 검색 우선 동선 — 사용자가 메뉴를 헤매지 않고 곧바로 ‘답’을 찾도록 유도
- KRDS 기반 컴포넌트 — 정부 디자인시스템 준수. 접근성 심사와 감사 대응에서 방어 논리가 가장 강함
- 유지보수 비용이 가장 낮음 — 장식을 덜어내 라인·여백·타이포로만 위계를 구성, 향후 콘텐츠 확장에 유리
- 선택 시 함께 정할 것
- 시각적 차별성이 가장 약합니다. 표준 컴포넌트 기반이라 다른 공공 포털과 인상이 비슷해질 수 있어, 브랜드 컬러 운용과 대표 비주얼(메인 배너 소재) 전략을 별도로 마련해야 합니다.
- # 검색 우선 동선
- # KRDS 기본 컴포넌트
- # 장식 요소 배제
- # 통합 패널
- # 가독성 · 신뢰감
첫 화면 정보 노출 순서
PC
검색
바로가기 8종 + 우리동네 지표
MOBILE
검색
우리동네 지표
바로가기 8종
C안 · 상시 노출형
SPLIT · STICKY PANEL스크롤과 무관하게 내 지역의 물 상태가 따라오는 화면
- 특장점
-
- 긴급 정보 도달률이 가장 높음 — 우측 패널을 스크롤에 고정해, 어느 지점에서도 홍수주의보·방류 정보를 놓치지 않음
- 유일한 병렬 구조 — 콘텐츠 탐색과 안전 정보 확인이 서로를 방해하지 않음
- 모바일 우선순위 재배치 — 좁은 화면에서는 안전 정보를 최상단으로 끌어올려 ‘먼저 도달’을 유지
- 선택 시 함께 정할 것
- 반응형 규칙이 가장 복잡합니다. 2단 → 1단 전환 시점과 Sticky 해제 기준을 퍼블리싱 착수 전에 확정해야 하며, 우측 패널 폭만큼 좌측 콘텐츠 영역이 좁아지는 점을 콘텐츠 기획과 함께 검토해야 합니다.
- # 2단 분할 레이아웃
- # Sticky 패널
- # 긴급정보 상시 노출
- # 모바일 우선순위 재배치
- # 정보 지속성
첫 화면 정보 노출 순서 — 유일하게 ‘병렬 구조’
PC 좌측
웹툰 · 배너
바로가기 8종
콘텐츠
PC 우측
우리동네 지표
홍수주의보
방류중인 댐
스크롤 시 고정 · 항상 노출
MOBILE
우리동네 지표
긴급 알림
바로가기 · 콘텐츠
안전 정보 선노출
03
포지셔닝 비교
표를 좌우로 밀어서 볼 수 있어요.
| 구분 | SCHEME A브랜드 감성형 | SCHEME B기능 중심형 | SCHEME C상시 노출형 |
|---|---|---|---|
| 한 줄 정의 | 물의 감성을 입은 위치기반 지표 우선 화면 | 검색을 앞세운 표준 기반 기능 화면 | 안전 정보가 항상 따라다니는 화면 |
| 핵심 UX 전략 | HERO에 검색과 지역 지표를 통합해, 사용자가 가만히 있어도 내 동네 물 정보를 얻게 함 | 검색창을 중앙에 단독 배치해, 사용자가 능동적으로 찾는 행위를 첫 동선으로 삼음 | 위치·긴급 정보를 별도 영역으로 분리·고정해, 탐색과 무관하게 항상 인지되게 함 |
| 레이아웃 구조 | 단일 컬럼 수직 흐름 | 단일 컬럼 수직 흐름 (중앙 정렬) | 2단 분할 + 우측 Sticky |
| 정보 우선순위 | 브랜드 → 개인 지표 → 서비스 | 긴급 → 검색 → 서비스 · 개인 지표 | 개인 지표 · 긴급 ‖ 콘텐츠 (병렬) |
| 강점 | 브랜드 차별성, 시각적 완성도, 리뉴얼 인상 효과 | 접근성 · 유지보수성, 정부 디자인시스템 준수라는 방어 논리 | 긴급 정보 도달률, 정보 지속성, 타 포털 대비 구조적 차별성 |
| 선택 시 함께 염두할 것 | 웹접근성, 이미지 등 유지보수 범위 | 배너 및 쇼츠 등 비주얼 확보 전략 | 2단 → 1단 전환 시점 / Sticky 해제 기준 / 좌측 콘텐츠 폭 |
04
선택 기준 · 결국 세 개의 질문입니다
어느 시안이 더 좋은가가 아니라, 우리 포털이 첫 화면에서 무엇을 먼저 말할 것인가를 정하면 시안은 자동으로 결정됩니다.
QUESTION 01
첫인상을 ‘브랜드’에 쓸 것인가?
개편을 국민이 ‘바뀌었다’고 체감하는 것이 중요하다면. 물의 이미지와 슬로건이 먼저 도달합니다.
A안 · 브랜드 감성형
QUESTION 02
국민이 ‘스스로 찾도록’ 도울 것인가?
장기 유지보수, 표준 준수 및 기능 제공 논리가 중요하다면. 검색이 먼저 도달합니다.
B안 · 기능 중심형
QUESTION 03
안전 정보를 ‘항상 붙들어 둘’ 것인가?
홍수·방류 등 재난 상황에서의 정보 도달률이 최우선이라면. 내 지역의 물 상태가 항상 따라옵니다.
C안 · 상시 노출형
세 안 모두 KWCAG 2.2와 반응형을 충족하므로, 어느 쪽을 고르셔도 품질 리스크는 없습니다.
남은 것은 ‘우리 포털이 국민에게 무엇을 먼저 말할 것인가’ — 이 한 가지에 대한 판단뿐입니다.
05
실시간 시안 투표 및 의견 수렴
세 가지 시안(A안 · B안 · C안) 중 가장 선호하시는 안을 선택하고 의견을 남겨주세요.