No.12따라하기릴스 #12

AI로 앱 만들 때 이거 안 붙이면 손해

같은 프롬프트, 같은 AI인데 한쪽만 회원가입·온보딩·결제 화면까지 진짜 앱처럼 나왔어요. 차이는 "디자인 규칙"과 "실제 앱 레퍼런스"를 붙였느냐예요. 유료 없이 따라 하는 방법도 넣었어요.

7개복사용 프롬프트
무료로 시작
26.10기준

프롬프트 바로 복사 사용법 보기

X @jaimintf · 왼쪽 그냥 / 오른쪽 스킬+레퍼런스

왜 결과가 달라질까요?

why it works

AI는 "기준"을 주면 훨씬 잘 만들어요

이렇게 작동해요

1무슨 앱인지누가, 왜 쓰는지
2레퍼런스닮고 싶은 실제 앱
3디자인 규칙여백·색·글꼴·버튼
4만들기/goal + 프롬프트

"메모 앱 만들어줘"만 쓰면 AI는 평균적인 화면을 만들어요. 닮고 싶은 실제 앱과 지켜야 할 규칙을 주면, 진짜 서비스처럼 화면 흐름까지 챙겨요.

준비물

코딩 AIClaude Code 또는 Codex (유료 요금제 필요)
Node.js스킬 설치 명령어(npx)를 쓰려면 필요해요
(무료 방법이면) 앱 스크린샷 3~5장닮고 싶은 앱 화면 캡처
(선택) Appllama MCP실제 앱 화면을 찾아주는 유료 도구

어떤 방법으로 할까요?

pick a route

처음이면 추천 방법부터

무료 방법 · 스크린샷 레퍼런스

처음이거나 유료 도구 없이 해보고 싶다면

필요한 것: 코딩 AI + 앱 스크린샷
비용: 코딩 AI 요금만
난이도: 쉬움

무료 방법 보기

원작 방식

스킬 + Appllama MCP

원작 영상과 같은 결과를 원한다면

필요한 것: 코딩 AI + 스킬 + MCP
비용: MCP 유료 요금제
난이도: 보통

원작 방식 보기

따라 하는 법

method

01STEP 1

디자인 스킬 설치하기 (무료)

터미널(맥: 터미널, 윈도우: PowerShell)을 열고 내 프로젝트 폴더에서 아래 명령어를 실행해요.
스킬 설치 명령어
```
npx skills add appllama/appllama-skills
```
TIP스킬은 AI에게 "앱 디자인은 이런 규칙으로 해"라고 알려주는 설명서예요. 한 번 설치하면 계속 적용돼요.

02STEP 2선택

(선택) Appllama MCP 연결하기

MCP는 AI에 외부 도구를 연결하는 방식이에요. Appllama MCP를 연결하면 잘 나가는 실제 앱 화면을 찾아 레퍼런스로 써요.
주의Appllama MCP는 유료 요금제가 필요해요. 없어도 아래 무료 방법으로 비슷하게 할 수 있어요.

03STEP 3

원작자 프롬프트 넣기

Claude Code나 Codex를 열고, 아래 프롬프트를 그대로 넣어요. 앱 이름과 닮고 싶은 앱만 바꾸면 돼요.

원작자가 입력한 프롬프트

/goal Build a notes and task tracker app. RN + Expo. APP NAME: NotesLlama, design it like Todoist.

원작자 팁 3가지
- 맥락을 정확히: 무슨 앱인지, 누가 쓰는지
- 진짜 앱 레퍼런스: "Todoist처럼"
- 규칙 정하기: 스킬이 이 역할을 해요

04STEP 4

무료 방법: 스크린샷으로 규칙 뽑기

닮고 싶은 앱 화면 3~5장을 캡처해서 첨부하고, 규칙부터 뽑게 한 뒤 그 규칙대로 만들게 해요.

1단계 · 규칙 뽑기

첨부한 앱 스크린샷들의 디자인 규칙을 정리해줘. 여백(px), 색상(HEX), 글꼴 크기와 굵기, 버튼 모양, 아이콘 스타일, 화면 이동 방식까지 표로 만들어줘. 추측한 값은 "추정"이라고 표시해줘.

2단계 · 규칙대로 만들기

위 규칙만 지켜서 [동네 헬스장 출석 체크] 앱을 만들어줘. 화면은 시작 화면, 회원가입, 메인(오늘 출석), 기록 캘린더, 설정 순서로. React Native + Expo로, 각 화면 사이 이동도 연결해줘.

TIP마음에 안 드는 화면은 스크린샷을 찍어 다시 첨부하고 "레퍼런스와 다른 점 3가지를 고쳐줘"라고 하면 빨리 좋아져요.

바로 쓰는 앱 프롬프트

prompt pack

누르면 바로 복사돼요 · 상황별로 골라 쓰세요

앱 종류별 시작 프롬프트

/goal 뒤에 붙이거나 그대로 넣기

01가계부 앱

Build a personal budget tracker app. RN + Expo. APP NAME: [이름]. Design it like Toss: big numbers, lots of white space, one action per screen. Include onboarding, monthly summary, and category charts.

토스 같은 느낌

02습관 앱

Build a daily habit tracker app. RN + Expo. APP NAME: [이름]. Design it like Duolingo: friendly colors, streak counter, small celebration animation when a habit is done.

듀오링고 같은 느낌

03예약 앱

Build a booking app for a [hair salon]. RN + Expo. APP NAME: [이름]. Design it like Airbnb: photo cards, simple date picker, clear booking summary before payment.

에어비앤비 같은 느낌