[도구 리뷰] 펜슬(Pencil) + 바이브 코딩으로 아이폰 앱 만들기 (1)
Автор: 편집자P
Загружено: 2026-02-05
Просмотров: 1909
Описание:
Pencil 제대로 쓰는 법 — "아토믹 디자인 문서"부터!
핵심은 간단합니다. 앱 화면부터 만들라고 하지 마세요. "아토믹 디자인 패턴에 의한 디자인 문서"를 먼저 만들라고 하세요. 버튼, 카드, 아이콘 같은 원자 단위 컴포넌트를 먼저 정의하고, 그걸 조합해서 화면을 만들면 완성도가 확 달라집니다.
타임라인
0:00 인트로 — Pencil 두 번째 영상
0:54 이렇게 쓰면 괜찮습니다
1:00 시작 세팅 — MCP 연결 확인 & 컨텍스트 넣기
2:25 아토믹 디자인 패턴이란?
3:36 디자인 문서 생성 시작 — "나의 오늘 마음" 글쓰기 앱
5:28 디자인 문서 vs 바로 화면 만들기, 뭐가 다른가
6:11 다음 영상 예고 — 리액트 네이티브로 앱 빌드까지
6:41 디자인 시스템 생성 결과 확인 (컬러, 타이포, 컴포넌트)
9:01 문서가 빈약할 때 — 풍부하게 보완 요청하기
10:01 변수 시스템의 장점 — 나중에 일괄 수정 가능
12:43 컨텍스트 밀어넣기 활용법
13:07 이모션 아이콘 확장 & 섀도우 시스템 수정
15:43 문서 레이아웃 정리
16:46 아토믹 디자인의 핵심 장점 — 재사용성
17:09 컬러 팔레트 일괄 변경 데모
17:54 스플래시 화면 만들기
19:27 홈 화면 만들기
20:37 커스텀 아이콘 교체 — 직접 그린 감정 이모지 적용
24:27 전체 아이콘 반영 & 아토믹 연결 확인
27:10 마무리 — 캐시 이슈 해결 & 최종 결과
#pencil #아토믹디자인 #커서 #Cursor #바이브코딩 #AI디자인 #MCP #리액트네이티브 #앱디자인 #디자인시스템
Повторяем попытку...
![[도구 리뷰] 펜슬(Pencil) + 바이브 코딩으로 아이폰 앱 만들기 (1)](https://imager.clipsaver.ru/fbcumH11Stg/max.jpg)
Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке:
![[특강] 스킬 활용을 그래서 어떻게 하라고요? 토스 스타일로 문서 양식 작성하기, 글쓰기 앱 만들기](https://imager.clipsaver.ru/W1WCNJkgk_0/max.jpg)
![[도구 리뷰] 펜슬(Pencil) + 바이브 코딩으로 아이폰 앱 만들기 (2)](https://imager.clipsaver.ru/MT9CHHtHeiM/max.jpg)
![[AI 리뷰] GPT Pro, 챗GPT만 쓰시면 손해, 뼈까지 우려드시려면? ━ 아틀라스, 코덱스(Codex) 앱](https://imager.clipsaver.ru/4UpNrhs93Ow/max.jpg)
![[도구 리뷰] 펜슬(Pencil) + 바이브 코딩으로 아이폰 앱 만들기 (5) ━ 컴포저 1.5는 얼마나 좋을까?](https://imager.clipsaver.ru/ujdg3sEstKE/max.jpg)
![[도구 리뷰] 펜슬(Pencil) + 바이브 코딩으로 아이폰 앱 만들기 (4)](https://imager.clipsaver.ru/MYFvPcXEkdQ/max.jpg)
![[도구 리뷰] 커서에서 피그마처럼 디자인하는 개꿀 솔루션 Pencil(지금 무료)](https://imager.clipsaver.ru/tRIPPfaaUPc/max.jpg)
![[도구 리뷰] 펜슬(Pencil) + 바이브 코딩으로 아이폰 앱 만들기 (3)](https://imager.clipsaver.ru/l8Usqw3hPX8/max.jpg)
![[AI 리뷰] 클로드 코워크(Cowork)로 일정한 결제 라인이 있는 워드 문서 만드는 방법? ━ 3편 : 결제 라인 추가 + 나만의 스킬 만들어 설치하기](https://imager.clipsaver.ru/NKNaGjsKuAM/max.jpg)
