바이브코딩 에센셜 with claude code

레퍼런스 분석 노하우

5. 레퍼런스 분석 노하우

1. 레퍼런스를 찾는 방법

레퍼런스를 살펴보는 것은 여러분의 머릿속에 다양한 '선택지'를 늘리는 과정과 같습니다. 여러분 스스로가 생성형 AI라고 상상해 보세요. AI는 방대한 데이터를 기반으로 결과물을 만들어냅니다. 데이터가 충분하지 않으면 원하는 결과물을 만들 수 없죠. 여러분도 마찬가지입니다. 기획과 디자인을 시작하기 전에 우리에게는 아이디어를 구체화할 수 있는 '데이터' 즉 다양한 레퍼런스가 필요합니다.

물론 세상의 모든 디자인 지식을 흡수할 수는 없습니다. 따라서 우리는 필요한 부분을 효과적이고 빠르게 살펴볼 수 있는 능력을 기르는 것이 중요합니다. 레퍼런스 분석을 통해 여러분의 디자인 감각과 아이디어의 폭을 넓혀보시면 좋습니다.

2. 레퍼런스 분석 예시

2.1 쇼핑 앱

기존 쇼핑 앱은 인터페이스가 어떻게 구성되어 있을까요? 지마켓, 다나와, 지그재그 등의 서비스를 살펴보도록 하겠습니다.

지마켓을 보니

메인 컬러가 초록색이네요. 신선한 느낌이 듭니다. 식품까지 판매하는 곳이라 잘 어울리는 것 같아요.

다나와를 보니

같은 초록 계열이지만 약간 민트색이라 신선식품 느낌이 덜합니다. 필터링 항목 수가 많지만 카테고리 분류를 잘 해서 사용자 입장에서 원하는 제품을 찾기 어렵지 않네요.

공통점 발견

지마켓과 다나와 모두 필터링 카테고리가 좌측 사이드바에 위치해 있네요. 사용자 경험이 나쁘지 않으니 내 서비스에도 적용하면 좋겠다는 생각이 듭니다.

지그재그를 보니

모바일 친화적인 인터페이스네요. 메인 컬러가 핑크색이라 주 타겟인 2-30대 여성과 잘 어울리는 것 같습니다. 필터 카테고리에 상품 이미지가 들어가니 직관적이고 좋아 보입니다.

2.2 필터링 UI를 추가

기존 서비스에서는 필터링 UI를 어떻게 디자인했을까요? 필터링 기능을 제공하는 서비스들을 살펴보면서 이런 점들을 체크해보면 좋습니다.

‘사용자 입장에서는 이런 부분이 편하고 이런 부분이 불편하겠네...’
‘카테고리 수가 많아지면 모바일에서 필터링 UI가 화면을 꽉 채우겠구나. 반응형에서는 어떻게 하면 좋을까?’

2.3 나무를 컨셉으로 한 로고

구글이나 핀터레스트에 '나무 로고' 'Tree Logo' 등의 키워드로 검색해서 기존 로고 디자인을 살펴보고 마음에 드는 스타일을 모아보면 좋습니다.
기존에 사용하는 서비스 중 '나무'를 컨셉으로 한 로고가 있는지 떠올려보세요.
수집한 레퍼런스 이미지를 가지고 이미지 생성 AI를 활용해 로고 디자인 아이디어를 얻을 수 있습니다.

3. 효과적인 레퍼런스 살펴보는 방법

3.1 3초 테스트 해보기

처음 봤을 때 "어? 이거 뭐하는 거지?"라고 헷갈리면 개선이 필요한 디자인입니다.
"아 이건 배달앱이구나" "아 이건 쇼핑몰이구나" 바로 알 수 있는 것이 좋은 디자인이에요.
내 눈이 어디로 먼저 가는지 체크해보는 것도 중요합니다.

3.2 사용해보면서 불편한 점 찾기

"어? 이 버튼 어디 있지?" → 중요한 버튼이 숨어있을 가능성
"글자가 너무 작아서 안 보여." → 가독성 문제
"뭘 눌러야 할지 모르겠어." → 직관성 부족
"로딩이 너무 오래 걸려." → 사용자 경험 문제

3.3 마음에 드는 부분 구체적으로 찾기

"이 버튼 색깔이 예쁘네." → 어떤 색깔인지 정확히 파악해보기
"이 글꼴이 읽기 편해." → 어떤 느낌의 글꼴인지 기억하기
"이 배치가 깔끔해 보여." → 어떻게 배치되어 있는지 분석하기
"전체적으로 고급스러워 보여." → 무엇 때문에 그런 느낌인지 생각해보기

3.4 내 프로젝트에 어떻게 적용할지 상상하기

"우리 서비스에도 이런 색깔 쓰면 좋겠다."
"이 메뉴 방식을 우리도 따라해보면 어떨까?"
"이런 느낌의 로고가 우리한테도 어울릴 것 같아."

4. 구체적으로 이렇게 분석해보세요

4.1 첫 화면에서 확인할 것들

로고는 어디에 있나요?
메뉴는 어떻게 생겼나요?
제일 중요한 버튼은 어디에 있나요? (CTA)
어떤 색깔을 주로 썼나요?

4.2 CTA란?

CTA는 "Call to Action"의 약자로 사용자에게 특정 행동을 유도하는 메시지나 버튼을 의미합니다.

'지금 구매하기' '회원가입', '무료체험 신청' 등이 대표적인 예시입니다.
버튼, 하이퍼링크, 배너 텍스트 등 다양한 형태로 나타날 수 있어요.
고객이 콘텐츠를 본 다음 자연스럽게 '다음 단계'로 이동하도록 돕는 것이 핵심입니다.
'오늘 무료 체험 시작하기', '쿠폰 받기', '뉴스레터 구독' 등 실생활에서 매우 흔히 볼 수 있습니다.

4.3 사용하면서 확인할 것들

버튼을 누르면 반응이 있나요?
페이지 이동이 자연스러운가요?
휴대폰에서도 잘 보이나요?
원하는 기능을 쉽게 찾을 수 있나요?

4.4 디자인 요소 확인하기

글자 크기가 적당한가요?
색깔이 너무 많지 않나요?
간격이 답답하지 않나요?
전체적으로 통일감이 있나요?

이렇게 하나씩 체크하다 보면 좋은 디자인과 개선이 필요한 디자인을 구분하는 눈이 생깁니다. 처음에는 "뭔가 좋아 보이는데..."라는 막연한 느낌이었다면 점점 "아 이래서 좋아 보이는구나"라고 구체적으로 알게 될 거예요.