본문 바로가기
Figma

디지털 접점 사례 분석 및 재구성

by Des.BiBi 2026. 10. 13.

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

디지털 접점
사례 분석 및 재구성

7일차에서 접점을 설계하는 법을 배웠다면,
오늘은 이미 만들어진 서비스를 뜯어보고 다시 짜보는 연습을 했어요.
남의 화면을 보는 눈이 있어야 내 화면도 고칠 수 있더라고요.

TODAY'S BASICS

사례 분석의 네 단계

1
사례 고르기
분석할 서비스와 목표 정하기
2
접점 분해하기
화면을 접점 단위로 쪼개 보기
3
문제 진단하기
막히는 접점과 이유 찾기
4
재구성하기
근거를 달아 다시 설계하기
01 · PICK A CASE

사례 고르기

분석할 서비스와 목표 정하기

분석은 무엇을 분석할지 고르는 데서 시작해요.
아무 서비스나 고르면 볼 게 흩어져서, 기준을 먼저 세워요.

사례 선정 체크리스트
✓사용자의 목표가 한 문장으로 말해지는가
✓접점이 세 개 이상 이어지는 흐름인가
✓내가 직접 써보고 느낌을 기록할 수 있는가
이번 연습 사례 (가상 서비스)
CASE
서비스 A · 꽃 구독 앱
사용자 목표: "매주 꽃을 부담 없이 받아보고 싶다"
분석 범위: 광고 → 첫 화면 → 플랜 선택 → 결제 → 첫 배송
02 · BREAK INTO TOUCHPOINTS

접점 분해하기

화면을 접점 단위로 쪼개 보기

화면 전체를 한 번에 평가하면 막연해져요.
접점마다 사용자가 하는 일과 느낌을 적어서 쪼개 봐요.

접점 분해표 예시
접점사용자가 하는 일느낌
광고 배너
예쁜 사진을 보고 눌러봄
😊
첫 화면
구독이 뭔지 한 번에 이해함
😊
플랜 선택
세 가지 중 고민함
😐
결제
입력 칸이 많아 멈칫함
😟
첫 배송
알림을 받고 기대함
😊
왜 중요한가

접점마다 느낌을 적으면, "전체적으로 별로예요"가 "결제 접점에서 불안해져요"처럼 구체적인 말로 바뀌어요.

03 · DIAGNOSE

문제 진단하기

막히는 접점과 이유 찾기

분해한 느낌을 이어서 보면 어디서 꺾이는지 보여요.
꺾인 지점에 이전에 배운 기준을 대고 이유를 찾아요.

접점별 감정 곡선
광고첫 화면플랜결제첫 배송
꺾인 지점(결제)을 기준에 대보면
일관성
앞 화면은 따뜻한 톤인데 결제만 딱딱한 양식이에요.
막힘
입력 칸이 많아서 흐름이 끊겨요.
불안
총 금액과 다음 결제일이 안 보여서 확신이 없어요.

BX 12일차의 "어디서 만나도 같은 브랜드로 느껴지는가"가 진단 기준으로 그대로 쓰여요.
BX 16일차의 중요도 기준으로도, 이탈과 직결되는 접점이라 가장 먼저 손볼 대상이에요.

04 · RECONSTRUCT

재구성하기

근거를 달아 다시 설계하기

진단한 문제를 그냥 고치지 않고, 근거 문장을 달아서 다시 설계해요.
그래야 왜 이렇게 바꿨는지 설명할 수 있어요.

결제 화면 재구성
BEFORE
 
 
 
 
 
 
 
→
AFTER
이번 주 꽃 · 총 금액 · 다음 결제일
 
 
 
 
근거 문장 (관찰 → 결정 → 이유)
관찰
결제 접점에서 감정이 가장 크게 꺾이고, 입력이 많고 톤이 끊김
결정
입력 칸을 줄이고 금액·결제일 요약을 위에 두며, 앞 화면의 톤을 이어감
이유
부담과 불안을 줄여야 구독 시작을 망설이지 않기 때문
피그마에서는 이렇게
📁 SECTION · 결제 접점 재구성
Before
→
After

Before와 After를 한 섹션에 나란히 두면 변화가 바로 보여요.
After는 6일차 디자인 시스템의 컴포넌트와 5일차 컬러 변수를 가져다 쓰면 톤이 저절로 맞아요.

한 가지 주의

재구성안은 어디까지나 가설이에요.
BX 21일차에서 배운 것처럼, 실제 사용자 반응으로 한 번 더 확인해야 해요.

🧭 오늘의 정리

분석은 감상이 아니라 접점으로 쪼개고, 기준에 대고, 근거를 달아 다시 짜는 일이었어요.

사례 고르기 — 목표와 범위를 먼저 정해요
접점 분해 — 접점마다 행동과 느낌을 적어요
문제 진단 — 꺾인 지점을 기준에 대보고 이유를 찾아요
재구성 — 근거 문장을 달고 Before/After로 보여줘요