내 데이터의 주인이 되는 데이터 주권 플랫폼 웹사이트

우정샵의 “내가 판매동의한 데이터만 거래하고 수익을 나눈다”는 데이터 마켓플레이스 서비스를 알리고 회원과 제휴 쇼핑몰의 가입으로 연결하기 위해 구축한 플랫폼 웹사이트입니다. 메인 화면은 “옵니다. 그날이” 메시지 → 제3자 제공 동의 문제 제기 → 데이터 주권 플랫폼 소개 → 가입 회원 수 → 참여 3단계 → 쇼핑몰 제휴 안내 순으로 한 화면씩 넘어가도록 구성했습니다. 특히 개인 50%, 제휴몰 25%의 수익 분배와 익명화 처리, 특허·인증 현황을 별도 영역으로 강조하고, 블루 그라디언트와 입체적인 3D 오브젝트 이미지로 새로운 시장을 여는 서비스의 분위기를 표현했습니다.

#우정샵
#데이터주권
#데이터마켓플레이스
#개인데이터
#판매동의
#수익분배
#제휴쇼핑몰
#플랫폼웹사이트
#반응형웹
#UIUX

Client: 우정샵
Category: 기타

Design Concept

데이터 주권의 첫 걸음

낯선 개념인 “데이터 판매동의”를 누구나 이해할 수 있도록, 일상의 구매 이력에서 출발하는 질문형 스토리로 메인을 설계했습니다.
블루 그라디언트와 입체적인 3D 오브젝트 이미지로 새로운 데이터 시장의 이미지를 만들고, 손글씨 느낌의 타이틀 서체를 더해 어렵게 느껴지기 쉬운 주제에 친근함을 더했습니다.
개인과 제휴 쇼핑몰, 두 방문자 그룹이 각자 필요한 정보를 찾고 가입으로 이어지도록 가입 안내와 제휴 안내를 같은 흐름 안에 나란히 배치했습니다.

Design Elements

01

질문으로 여는 스토리 구조

“내가 만든 구매 이력인데 왜 돈은 기업만 벌까요?”로 문제를 먼저 제기했습니다.
서비스 소개가 이어지며 방문자가 필요성을 스스로 이해하도록 했습니다.
02

세 가지 핵심 가치 카드

주권 행사, 수익 분배, 보안을 같은 형식의 카드로 정리했습니다.
서비스의 차별점을 짧은 문구로 빠르게 파악할 수 있습니다.
03

참여 3단계 프로세스

회원가입, 제휴몰 쇼핑 및 동의, 현금 출금을 단계로 나눠 안내했습니다.
지금 가능한 단계와 오픈 예정 단계를 구분해 보여줍니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#2D67FF

Sub Color#1B7EE1

Point Color#00409A
Vivid Blue#2D67FF
Sky Blue#3FA9F7
Deep Blue#00409A
Alert Red#F45050
Soft Gray#E6E6E6
White#FFFFFF

Typography

Aa 가나다 Paperlogy

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

내 데이터의 주인이 되는 데이터 주권 플랫폼 웹사이트 서브 페이지 1 — Sub Page 우정샵 소개 페이지 01

내 데이터의 주인이 되는 데이터 주권 플랫폼 웹사이트 서브 페이지 2 — Sub Page 회원가입 페이지 02

Note

일반 회원과 제휴 쇼핑몰이 같은 구조 안에서 각자의 정보를 찾도록 설계했습니다.

메인은 한 화면씩 넘어가는 풀페이지 구성으로, 소개 페이지는 소개·이용방법·FAQ 탭 구조로 정리했습니다.
가입과 제휴 신청은 각각 별도 흐름으로 분리해 방문자의 목적에 맞게 이어지도록 했습니다.

Grid: 혜택을 개인, 제휴 쇼핑몰, 데이터 구매자 세 그룹으로 나눠 같은 카드 규격으로 정리했습니다.
Header: 상단에 이벤트 배너와 홈, 블로그, 인스타그램, 카카오 채널 아이콘을 함께 두었습니다.
CTA: “우정샵 가입하기”와 “우정샵과 제휴하기” 버튼으로 두 방문자 그룹을 각각 안내합니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

상단 이벤트 배너진행 중인 이벤트를 화면 최상단에서 바로 확인

SNS 아이콘 바로가기블로그·인스타그램·카카오 채널을 아이콘으로 상시 노출

Optimization

Menu

PCMenu · 홈과 SNS 아이콘, 우측 페이지 이동 버튼

MOMenu · 아이콘 중심으로 줄여 화면 공간 확보
Layout

PCLayout · 한 화면씩 넘어가는 풀페이지 섹션

MOLayout · 세로 한 열 흐름으로 재배치
Typography

PCTypography · 손글씨 느낌의 타이틀과 Pretendard 본문

MOTypography · 제목 크기를 줄이고 줄바꿈을 화면 폭에 맞춰 조정
Image

PCImage · 3D 오브젝트 이미지를 블루 배경에 배치

MOImage · 오브젝트 위치와 크기를 모바일 비율에 맞춰 조정