디지털 접점 종합

피그마 기초 스터디로그 · 10

디지털 접점 종합
행동에서 기기까지, 한 바퀴

7일차부터 9일차까지 디지털 접점을 세 번에 나눠 배웠는데,
정리해보니 하나의 순환이더라고요.
오늘은 이 세 번을 이어서 접점 설계가 어떻게 한 바퀴 도는지 정리해봤어요.

ONE LAP

접점 설계 한 바퀴

1

여정 읽기

행동에서 접점을 찾아요 (7일차)

2

진단·재구성

막힌 접점을 근거로 고쳐요 (8일차)

3

기기로 확장

폰·태블릿·데스크톱에 맞춰요 (9일차)

4

일관성 점검

어디서 만나도 같은 브랜드인지 봐요

01 · READ THE JOURNEY

여정 읽기

행동에서 접점을 찾아요

모든 건 화면이 아니라 사용자의 행동에서 시작해요.
행동 단계를 먼저 그리고, 단계마다 어떤 접점이 필요한지 정해요.

행동 여정에서 막힌 곳 찾기

발견

›

탐색

›

결정

›

결제

›

재방문

결제에서 가장 많이 빠졌다면 여기가 첫 번째 손볼 접점이에요.

막힘을 알려주는 행동 신호

클릭 관심과 혼란

스크롤 흥미를 잃는 지점

체류 고민과 헷갈림

이탈 가장 직접적인 신호

02 · DIAGNOSE & RECONSTRUCT

진단·재구성

막힌 접점을 근거로 고쳐요

막힌 접점을 찾았으면 쪼개서 느낌을 적고, 기준에 대고, 근거를 달아 다시 설계해요.
고친 뒤엔 정말 나아졌는지 다시 봐요.

재구성 전후 감정 곡선 (가상 예시)

광고첫 화면플랜결제첫 배송

재구성 전재구성 후

재구성의 순서

접점 분해→ 기준에 대기→ 근거 문장→ Before/After

재구성안은 어디까지나 가설이에요.
실제 사용자 반응으로 한 번 더 확인하는 단계까지가 한 세트예요.

03 · EXTEND TO DEVICES

기기로 확장

폰·태블릿·데스크톱에 맞춰요

고친 접점을 기기마다 다시 설계해요.
기기는 화면 크기가 아니라 사용자가 놓인 상황이라는 걸 잊지 않는 게 핵심이에요.

같은 접점, 세 가지 기기

 

 

 

폰

 

 

 

태블릿

 

 

 

데스크톱

크기는 달라도 같은 버튼 컴포넌트를 써요.

기기 설계의 네 가지 포인트

상황 기기마다 맥락이 달라요

브레이크포인트 구간별 그리드

규칙 오토 레이아웃으로 반응

우선순위 작은 화면은 핵심만

04 · CHECK CONSISTENCY

일관성 점검

어디서 만나도 같은 브랜드인지 봐요

한 바퀴를 다 돌았으면 마지막으로 전체가 한 브랜드로 이어지는지 확인해요.
BX 12일차의 질문이 여기서 점검표가 돼요.

접점 설계 마무리 체크리스트

✓모든 기기에서 같은 컴포넌트를 쓰고 있나

✓색과 글자가 변수·스타일로 연결되어 있나

✓접점마다 말투와 분위기가 이어지나

✓기기마다 핵심 행동이 가장 눈에 띄나

✓고친 접점을 다시 확인할 계획이 있나

✓흐름 전체가 한 섹션에서 한눈에 보이나

피그마 도구는 어디에 쓰였나

섹션

접점 흐름과 Before/After를 한눈에 묶어요

3일차

프레임·그리드

기기별 구간의 기준을 잡아요

1일차

오토 레이아웃

화면 폭에 따라 알아서 반응해요

2일차

컴포넌트

상태와 기기 변형을 한 세트로 관리해요

4일차

변수·스타일

색과 글자 톤을 어디서나 같게 유지해요

5일차

디자인 시스템

이 모든 걸 한 체계로 묶고 키워가요

6일차

서비스 A(가상의 꽃 구독 앱)로 한 바퀴 돌아보면

여정

결제 접점에서 이탈이 가장 컸어요

행동 여정과 이탈 신호로 첫 번째 손볼 곳을 골랐어요.

재구성

입력은 줄이고 금액·결제일 요약을 위로

근거 문장을 달아서 Before/After로 비교했어요.

기기

폰은 한 열로, 데스크톱은 요약을 옆에

같은 컴포넌트를 구간별로 배치해 반응하게 했어요.

점검

어디서 봐도 같은 톤인지 확인

변수와 컴포넌트 연결, 사용자 반응 재확인까지 마쳐요.

🧭 오늘의 정리

디지털 접점 설계는 세 번의 수업이 아니라 돌고 도는 하나의 순환이었어요.

여정 읽기 — 행동에서 막힌 접점을 찾아요

진단·재구성 — 근거를 달아 고치고 다시 확인해요

기기로 확장 — 같은 접점을 기기마다 다시 설계해요

일관성 점검 — 전체가 한 브랜드로 이어지는지 봐요