PRODUCT ENGINEER WORKSHOP
빈칸 채우기와
나만의 메세지
AI의 특성을 이해하고, 디자인·레퍼런스·3D를 의도 있게 만드는 법
SESSION 1 · 20분
AI의 특성 이해하기
없는 걸 창조하기보다, 레퍼런스를 찾고 조합하기
03
기존 웹앱 확인
SESSION 1
기존에 구현한 웹앱들 확인하기
구현한 웹앱
→
AI 디자인의 한계
04
AI의 특성 배우기
SESSION 1
AI의 특성들 하나씩 배울 예정
이해
활용
더 잘 활용
AI 특성을 이해하고 활용하면 더 잘 활용할 수 있다
05
창조가 아니라 빈칸 채우기
SESSION 1
AI의 특성 — 없는 걸 창조하는 건 잘 못한다
단어 채움 단어 채움 단어
✓ 빈칸 채우기
단어와 단어 사이 빈칸을 잘 채운다
VS
✗ 새 단어 창조
하지만, 새로운 단어를 만들어내는 것은 못한다
여기서 AI란? 현재 LLM (Transformer 구조)
06
레퍼런스 변형은 잘한다
SESSION 1
좋은 레퍼런스가 있다면 맥락에 맞게 변형하는 걸 잘한다
좋은 레퍼런스
→
맥락에 맞게 변형 ✓
✗ 새로운 레퍼런스를 창조하는 건 잘 못한다
07
왜 코딩을 잘할까
SESSION 1
왜 코딩을 잘할까?
정형화된 레퍼런스 많음
→
정답이 정해져 있는 편 ★
소개 페이지
간단하게 동작하는 웹 서비스 등
레퍼런스들을 맥락에 맞게 변형하는 건 AI가 잘하는 일
08
디자인은 정답이 다양하다
SESSION 1
디자인은? 코딩보다 훨씬 더 다양한 정답이 있다
정답?정답?정답?정답?정답?
레퍼런스가 없다면 일반적인 답변 밖에 할 수 없음
AI Slop → 뻔한 디자인
09
디자인을 잘 하려면
SESSION 1
디자인을 잘 하기 위해 필요한 능력
새로운 맥락
+
좋은 것들
맥락에 맞는 레퍼런스
→
조합하는 능력 ★
SESSION 1
오늘 배울 것은 레퍼런스 찾고 조합하기.
레퍼런스 찾기
→
조합하기
SESSION 2 · 20분
design.md로 디자인 적용
getdesign.md에서 레퍼런스 디자인을 복사해 적용하기
12
design.md 가져오기
SESSION 2
getdesign.md에서 design.md 가져오기
01
getdesign.md 방문
사이트별 디자인 분석 모음
02
DESIGN.md 복사
마음에 드는 레퍼런스 선택
03
프로젝트에 첨부
붙여넣기
https://getdesign.md
13
design.md 적용
SESSION 2
복사한 design.md로 디자인 적용
design.md
좋은 레퍼런스
→
"이 design.md로 적용해줘"
→
일관된 디자인 ★
좋은 레퍼런스를 맥락에 맞게 변형하는 건 AI가 잘하는 일
SESSION 3 · 20분
랜딩 페이지 따라하기
마음에 드는 사이트를 복제하고 수정하기
15
랜딩 페이지 따라하기
SESSION 3
랜딩 페이지를 따라하는 방법 설명
01
mobbin에서 고르기
02
링크 붙여넣기
03
"똑같이 복제해줘"
라고 하기
https://mobbin.com/discover/sites/latest
16
확인하고 수정
SESSION 3
결과 확인하고 수정하기
확인
⟲
수정
SESSION 4 · 20분
Spline으로 3D 가져오기
샘플을 가져와 사이트로 만들고 배포까지
18
레퍼런스 포트폴리오
SESSION 4
아래 포트폴리오 보여주면서
🤖 Spline · 로봇 소개 예시
https://community.spline.design/file/a38eafa0-2fa5-4630-983f-6940475adf5e
19
Spline 실습
SESSION 4
간단한 실습
01
샘플 가져오기
Spline에서
02
사이트 만들기
03
배포까지
해보기
20
Spline의 한계
SESSION 4
Spline의 한계 설명
100%
custom 불가능
SESSION 5 · 20분
Three.js로 100% 커스텀
Claude Code와 함께라면 완전한 커스터마이징이 가능하다
22
Three.js 소개
SESSION 5
Three.js 소개
Three.js
→
custom 실습 예제
23
100% 커스텀
SESSION 5
Three.js로 custom 100% 가능 (Claude Code와 함께)
Spline
100% custom 불가능
VS
Three.js
100% 가능 · Claude Code와 함께
완성된 예제 custom 하기 실습
로봇 색 바꾸기
모션, 텍스트 등 변경하기
SESSION 6 · 30분
기술을 넘어, 의도와 메세지
기술은 도구일 뿐 — 의도를 담아 감동을 전하기
25
기술은 도구일 뿐
SESSION 6
여러분이 가져다 쓴 건 기술
기술 자체로는 가치가 없음 — 도구일 뿐
↓ 도구일 뿐
의도가 있어야 한다
감동을 전해야 한다
26
의도와 감동
SESSION 6
의도를 담아 감동을 전하기
메세지부터 떠올리기
전하려는 메세지
기획
기획의 필요성
감동 전달 ★
27
기획하는 방법
SESSION 6
기획하는 방법 — Claude Code와 함께
01 · 조사하기
함께 조사하기
agent teams
02 · 토론하기
함께 토론하기
03 · 정리하기
"PRD로 정리해줘" 요청하기
28
좋은 PRD
SESSION 6
좋은 PRD란 나만의 기획이 담겨야 함
AI가 채우는 빈칸
누구나 채울 수 있는 것
≠
나만의 메세지 ★
AI가 채울 수 없는, 빈칸이 아닌 새로운 것
나만의 기획은 나만의 메세지를 담은 것
SESSION 7 · 30분
PRD로 랜딩 페이지 구현
완성된 PRD를 3D와 랜딩 페이지에 적용해 개선하기
30
PRD로 구현하기
SESSION 7
완성된 PRD로 랜딩 페이지 구현하기
완성된 PRD
메세지에 맞는 레퍼런스
함께 전달하기
→
랜딩 페이지 + 3D ★
적용해서 개선하기
SESSION 8 · 30분
일관성 문제와 빈칸
지시에 빈칸이 있으면, 그 부분을 AI가 채운다
32
일관성 문제
SESSION 8
구현하다 보면 발생하는 일관성 문제
지시 빈칸 지시 빈칸
AI는 빈칸을 잘 채운다
33
결과물이 계속 바뀐다
SESSION 8
구현 과정에서 결과물이 계속 바뀜
지시 + 빈칸
→
AI가 채움
→
결과 A
결과 B
결과 C
지시할 때 빈칸이 있다면, 그 부분을 AI가 채우기 때문
SESSION 9 · 30분
과제 — 한번 더 발전하기
5일 차에 발전시키고, 8일 차에 기능을 붙인다
35
과제 소개
SESSION 9
과제 소개
5일 — 한번 더 발전하기
스크롤 말고 또 다른 형태가 있다면?
-
메세지의 중요성
- 의도를 담아 감동 전하기
8일 — 추가 기능 붙이기
기능 붙이기
카톡 공유하기 등
WRAP UP
빈칸을 채우는 건 AI,
메세지를 채우는 건 나.
레퍼런스를 조합하는 기술 위에, 나만의 의도와 감동을 얹습니다.