노란우산 통합 플랫폼 UIUX 재설계

노란우산은 소기업·소상공인의 폐업과 노령에 대비하는 공제제도다. 사업주에게는 사실상 퇴직금 역할을 한다. 공제 관리, 복지 혜택(복지플러스), 경영 자문(경영지원단)이 세 개의 서비스로 나뉘어 운영되고 있었다. 2024년 말 ISMP를 시작으로 이를 하나의 통합 플랫폼으로 재구축하는 사업이 출발했다. 우리는 통합 플랫폼의 UIUX 전략과 메인 디자인을 맡았다.

문제 — 몰라서 못 쓰는 서비스

이용해 본 고객의 만족도는 높았다. 휴양시설 82.9%, 교육지원 81.0%, 대출 80.8%(2025 노란우산 복지서비스 의견조사). 그런데 이용 경험 자체가 드물었다. 경영상담은 만족 응답이 68.9%인데 실제로 이용해 본 고객은 5.8%뿐이었고, 교육지원도 8.2%에 그쳤다. 휴양·경영상담·교육에서는 미이용자의 45~49%가 그 이유로 '서비스제공사실 몰랐음'을 골랐다. 보고서의 진단 그대로 — 서비스를 이용하지 않는 이유는 품질이 아니라 안내 구조와 접근성이었다.

구조 안쪽도 같은 상태였다. 연계 서비스가 배너와 링크로만 이어져 여정이 끊겼다. 브랜드의 상징인 옐로조차 #FBD801·#FFD115·#FAD700·#FAD200 네 가지 코드가 페이지마다 다르게 쓰이고 있었다.

리서치 — 24개 유저군을 3개의 목적으로

ISMP에서 도출된 24개 유저군(연령 3그룹×8명을 가입기간·서비스 이용범위·부금액·가입채널 4축으로 구분)을 재분석하고 유형별 여정맵을 그렸다. 유형 재정의의 기준은 이용 목적이었다. 공제 없이 무료 기능만 쓰는 일반회원, 납부 확인이 목적인 공제 중심 이용자, 혜택을 찾아다니는 복지플러스 적극 이용자.

• 공제가입만 하고 다른 서비스는 뭐가 있는지 잘 몰라요공제 중심 이용자 인터뷰

공제 중심 이용자는 로그인 이후에도 내 공제정보까지 여러 단계를 더 들어가야 했다. 일반회원의 여정에서는 공제회원 전용 기능과 누구나 쓰는 기능이 구분 없이 섞여 있었다. 이용 이력 데이터는 개인 식별이 불가능한 형태라 고객군 단위 분석에는 한계가 있었고, 만족도 조사와 인터뷰로 보완했다.

인사이트 — 이미 드나드는 홈에 혜택을

세 서비스는 각자 잘하는 것이 있었다. 노란우산 메인의 빠른 메뉴, 복지플러스의 행동 유도 배너, 경영지원단의 2단짜리 간결한 메뉴. 흐름이 끊기는 곳은 서비스를 건너가는 경계였다.

인지 문제를 풀 접점도 이미 화면 안에 있었다. 납부를 확인하러 정기적으로 드나드는 공제회원조차 다른 서비스의 존재를 몰랐다. 새 광고 채널을 여는 것보다 이 기존 방문이 지나는 홈에 혜택이 보이게 만드는 쪽이 실질적인 해결 지점이라고 판단했다. 그래서 개선의 단위를 화면이 아닌 여정으로 잡았다.

전략 — 목적지향성 UX

미션은 "회원 중심의 통합 서비스 체계로 고도화"다. UX 방향은 "고객 목적에 맞게 흐름을 잇고 탐색 부담을 낮춘 목적지향성 UX로의 재구조화"로 정의했다. 실행 과제는 셋으로 좁혔다.

1 · Clarity Structure — 상황과 다음 행동이 자연스럽게 이어지는 명료한 구조

2 · Direct Explore — 복잡함 없이 목적지에 닿는 직관적 탐색

3 · Micro Touch — 사용자의 순간을 읽고 부드럽게 이끄는 경험

탐색 — 표현 체계가 다른 두 안

같은 전략 위에 두 안을 설계했다. A안은 SUITE 서체와 Semi Round 형태(KRDS 라디우스 기준 참조), Soft Flat 아이콘으로 신뢰와 안정감을 겨냥했다. B안은 Pretendard와 Spacing Round, 스큐어모피즘 아이콘으로 부드러운 밀도 완화를 노렸다. 탐색 구조도 서로 다르게 짰다. A안은 공제와 혜택에서 자문·정부지원사업·이벤트로 이어지는 '정보 순차 탐색 구조', B안은 콘텐츠 사이를 오가는 '자연스러운 콘텐츠 탐색 구조'다.

비교는 실기기에서 했다. 상단 토글로 A안과 B안을 전환하며 비로그인, 일반회원, 공제회원 순으로 체험하는 라이브 프로토타입을 만들어 QR로 시연했다. 최종안은 B로 확정됐다.

브랜드 전용 서체인 KBIZ 고딕도 후보에 올렸지만, 서비스 환경의 다양한 케이스 대응이 어려워 제외했다.

해결 1 · 목적별 화면 전환 구조

PC 메인을 MY+·공제·복지·혜택 섹션 전환 구조로 설계했다. 세 유형의 사용자가 각자의 목적 화면에서 시작해, 다른 서비스로 넘어갈 때도 같은 화면 문법 안에서 움직이게 하기 위해서다.

해결 2 · 개인화 홈

내 공제 납부 현황, 멤버십 포인트, 예약 내역을 홈 최상단에 뒀다. 공제 중심 이용자의 핵심 방문 목적이 납부·적립 확인이라는 여정맵 발견을 배치로 옮겼다. 정부지원사업과 자문위원 추천은 회원가입 정보 기반 개인화로 걸었다.

해결 3 · 디자인 시스템 "Seamless Guidance"

다음에 해야 할 일이 자연스럽게 눈앞에 펼쳐지는 경험을 컨셉으로 잡았다. Everyday Clarity(일상 언어의 명료함), Clear Focus(불필요한 선택 제거), Neutral Warmth(감정 과잉 없는 안정감) 세 방향과 하위 원칙 9개를 정의했다. Clear Focus 아래에는 작은 피드백, 짧고 명확한 레이블, 넓은 여백을 뒀다. 네 갈래로 흩어져 있던 브랜드 옐로는 단일 코드로 통일해, 중립 그레이 위에 상징적 포인트로만 쓰도록 규정했다.

해결 4 · UX 라이팅 규칙

화면 문장에도 시스템을 세웠다. 한 문장 한 메시지, 기본 15자 이내, 감정 표현은 안정감 제공까지만. "지금 바로 안내드릴게요"는 "지금 안내해드려요"로 다듬는다. 한 문장이 하나의 행동 선택으로 바로 이어지게 하는 규칙이다.

디자인 1 · 서체·형태·색·아이콘을 한 벌의 규정으로

As-Is 진단에서 브랜드는 Voice·Shape·Color·Sign System 네 축 모두 가이드와 다르게 굴러가고 있었다. 확정된 B안을 기준으로 그 네 축을 하나씩 규정했다. 본문 서체는 Pretendard로 정했다. Neo Grotesque 계열이라 작은 크기에서도 자소가 버티고, 한글·영문·숫자를 섞어도 폭이 고르다. 공제 금액과 납부일이 화면 앞자리에 서는 서비스라 이 균형이 필요했다.

Shape는 Spacing Round로 정했다. 콘텐츠 영역마다 제각각이던 표현을 한 체계로 묶고, 정보 밀도를 낮춰 시각 피로를 줄이는 쪽을 골랐다.

Sign System은 규정 자체가 없던 자리였다. 은은한 입체감만으로 형태와 위계를 가르는 스큐어모피즘으로 세웠고, 강한 대비나 과한 질감은 브랜드의 안정감을 해쳐 배제했다.

Color는 네 개 코드가 페이지마다 다르게 쓰이던 축이다. 중립 그레이를 바탕으로 두고 옐로는 #FAD700 하나로 정리해 상징적인 자리에만 남겼다. 보조 컬러 Slate Green·Pink·Blue는 정보를 읽는 순서를 잡는 데만 쓴다.

디자인 2 · 상태를 먼저 답하는 홈

홈은 회원이 상태를 확인하러 들어오는 화면이라, 첫 화면에서 답을 끝내는 것을 기준으로 삼았다. 데스크톱 홈은 등급과 포인트 인사로 열리고, 그 아래로 계약 정보와 대출 신청이 카드로 이어진다. 옐로는 계약 정보 카드와 GNB의 통합검색 버튼에만 얹어, 색이 닿는 자리를 두 곳으로 제한했다.

모바일 홈은 상단 전체를 옐로 면으로 열고, 포인트와 게이지, 미션 칩을 그 안에 담았다. 적립과 사용을 한 면에서 보게 묶었다. 바로 아래에는 돼지저금통 일러스트를 얹은 납부 현황과 다음 납부일을 뒀다. 하단 탭은 홈·공제·복지·자문·마이 다섯으로 정리했다.

디자인 3 · 링크로 끊기던 이동을 콘텐츠로

끊겨 있던 서비스 사이를 콘텐츠가 잇게 했다. 회원은 공제를 확인하다 이벤트로 넘어가고, 이벤트에서 정부지원사업과 고객지원으로 건너간다. 혜택을 따로 찾아 들어가지 않아도 이용 중에 지나가게 만드는 흐름이다.

고객지원 진입은 이벤트 흐름 끝에 카드로 붙였다. 흐름을 벗어나지 않고 자주 묻는 질문과 1:1 문의로 나뉜다. 납부를 확인하러 들어온 회원이 이벤트를 지나 혜택까지 닿도록, 방문길 위에 서비스를 겹쳐 놓았다. 보고서 마지막에는 이 여정 설계를 1단계로 두고, 고객 데이터 적재와 마케팅(CRM) 솔루션 도입까지 3단계 로드맵으로 제안했다.