Pinterest를 참고해서 AI에게 '디자인을 배우는 방법'을 가르쳐 본 이야기 🎨

소개

새로운 모바일 앱을 기획할 때면 자연스럽게 Pinterest를 열어보게 됩니다.

멋진 화면은 정말 많지만, 한 가지 고민이 있었습니다.

"이걸 그대로 따라 하는 게 아니라, 디자인 원리를 배우게 만들 수는 없을까?"

특히 토스 미니앱처럼 제약이 있는 환경에서는 예쁜 UI보다 왜 이런 디자인이 반복되는지, 우리 서비스에도 적용할 수 있는지를 판단하는 과정이 더 중요했습니다.

그래서 이번에는 AI에게 "디자인 트렌드를 조사하는 방법"이 아니라, "디자인를 학습하고 검증하는 과정" 자체를 하나의 스킬로 만들어보자는 목표를 세웠습니다.

진행 방법

🎯 목표

기존에는 Pinterest에서 마음에 드는 화면을 저장하고 참고하는 수준이었다면,

이번에는 AI가 아래 과정을 스스로 수행하도록 설계했습니다.

디자인 질문 설정
    ↓
Pinterest 및 공개 레퍼런스 조사
    ↓
실제 앱 UI와 포트폴리오 구분
    ↓
반복되는 패턴 추출
    ↓
토스 미니앱 환경에서 사용 가능한지 검증
    ↓
프로토타입 제작
    ↓
충분히 검증된 경우에만 디자인 원칙으로 채택

🧩 기존 스킬을 활용한 구조

조사부터 디자인 적용까지 하나의 스킬에 넣기보다는 역할을 분리했습니다.

design-trend-monitoring-workflows
- Pinterest
- Dribbble
- Behance
- Mobbin
- 공개 디자인 자료 조사

↓

appintoss-pinterest-design-learning
- 조사 결과 분석
- 토스 미니앱 적합성 평가
- 디자인 토큰 변환
- 프로토타입 검증
- 기존 디자인 스킬 업데이트 여부 결정

덕분에 트렌드 조사와 실제 제품 설계를 독립적으로 발전시킬 수 있는 구조가 되었습니다.

🔍 조사 과정도 하나의 규칙으로 만들기

무작정 예쁜 화면을 모으지 않고 세 가지 관점으로 조사하도록 했습니다.

도메인 UI
- 예: 가계부, 습관관리, 쿠폰관리
비주얼 메타포
- 예: 영수증
- 티켓
- 여권
- 아카이브
상태 및 리텐션
- 진행률
- 연속 기록
- Empty State
- 보상 화면

그리고 모든 자료에는 다음과 같이 증거 수준을 기록하도록 했습니다.

구분

의미

in-product UI

실제 앱 화면

portfolio frame

포트폴리오 목업

visual mood

분위기 참고

not verified

확인 불가

이 과정을 거치면 "예쁜 화면"과 "실제 제품에서 검증된 패턴"을 구분할 수 있습니다.

💡 AI가 바로 복사하지 못하도록 만든 필터

가장 중요했던 부분은 복제가 아니라 추상화였습니다.

예를 들어 여러 앱에서 영수증 형태의 소비 내역 화면이 반복된다면,

❌ 하지 않는 것

특정 앱의 레이아웃 복사
색상 복사
아이콘 복사

✅ 대신 배우는 것

시간순 기록 구조
총합을 보여주는 위치
정보 계층
CTA 우선순위
상태 표현 방식

이렇게 추상화된 패턴만 다음 단계로 전달하도록 설계했습니다.

✅ 토스 미니앱에서 다시 한 번 검증

추상화된 패턴도 바로 적용하지 않습니다.

다음 기준을 통과해야 합니다.

첫 화면에서 용도를 이해할 수 있는가
주 행동이 명확한가
다시 방문할 이유를 만드는가
접근성을 만족하는가
TDS와 충돌하지 않는가
성능 문제가 없는가
심사 정책에 안전한가
특정 서비스 디자인을 복제하지 않았는가

이 과정을 통과한 패턴만

디자인 토큰
화면 역할
컴포넌트 규칙

으로 변환됩니다.

🧪 마지막은 항상 프로토타입

좋은 아이디어처럼 보여도 바로 적용하지 않습니다.

항상 세 가지 버전을 비교합니다.

A : 첫 행동 중심
B : 상태 표현 중심
C : 리텐션 중심

그리고

320px
430px
접근성
상태 화면
Reduced Motion
콘솔 오류

등을 확인한 뒤에야 실제 디자인 원칙으로 반영하도록 만들었습니다.

[초안]

[디자인 적용후]

결과와 배운 점

이번 작업에서 가장 큰 수확은 AI에게 디자인 결과물이 아니라 '디자인 사고 과정'을 가르칠 수 있다는 것이었습니다.

예전에는 Pinterest에서 좋은 화면을 발견하면 바로 참고하려고 했습니다.

하지만 이제는

왜 여러 앱에서 비슷한 구조가 반복되는지
우리 서비스에도 필요한 이유가 있는지
검증할 방법은 무엇인지

를 먼저 생각하도록 스킬이 바뀌었습니다.

또한 모든 관찰을 바로 디자인 규칙으로 만들지 않고,

관찰
검증
프로토타입
실제 반영

이라는 단계를 두면서 디자인 시스템도 훨씬 안정적으로 관리할 수 있게 되었습니다.

무엇보다 흥미로웠던 점은 AI가 점점 "디자인을 생성하는 도구"가 아니라 "디자인를 학습하는 동료"처럼 느껴졌다는 것입니다.

앞으로는 Pinterest뿐 아니라 다양한 공개 디자인 자료를 같은 방식으로 분석해, 검증된 패턴만 꾸준히 축적하는 디자인 학습 시스템으로 발전시켜 볼 계획입니다.

이번 작업은 기존에 운영하던 디자인 스킬을 기반으로 확장했습니다.

design-trend-monitoring-workflows
appintoss-design-iteration-workflows
appintoss-visual-metaphor-system
appintoss-prototype-variants

그리고 새롭게 appintoss-pinterest-design-learning 스킬을 추가하여,

관찰 → 분석 → 검증 → 디자인 시스템 반영이라는 학습 루프를 구축했습니다.

🔥<24기 AI 스터디> 9/21 모집 마감 🔥