여러분은 아마 이미 enter.converge.ai의 핵심 마법이 prompt에 있다는 것을 발견하셨을 겁니다. 이는 여러분이 저희 AI와 소통하고, 협업하며, 창작할 때 사용하는 언어입니다.

프롬프트가 좋을수록 결과물은 더 인상적입니다.

Enter를 아주 똑똑하고 속도가 매우 빠른 주니어 개발자라고 생각하세요... 하지만 마음을 읽는 데는 형편없는 개발자입니다. 요청하는 것은 무엇이든 만들 수 있지만, 여러분의 의도를 추측할 수는 없습니다. 여러분의 역할은 완벽한 비즈니스 요구사항 정의서(BRD)처럼 아주 명확한 지침을 제공하는 것입니다.

이 가이드는 여러분을 초보자에서 전문가로 이끌어줄 효과적인 프롬프팅의 기술과 원리를 안내할 것입니다.

1부: 핵심 원칙 — 탄탄한 기반 다지기

무언가를 만들기 전에, 이 세 가지 황금률을 반드시 기억하세요.

규칙 1: 명확성이 핵심이다 (모호하게 말하지 마세요)

모호함은 여러분의 가장 큰 적입니다. 지침은 픽셀 단위까지 정확해야 합니다.

나쁜 프롬프트 👎:

"내 사이트를 위한 요금제를 만들어줘."

좋은 프롬프트 👍:

"다음 기능을 포함한 인터랙티브 요금제 섹션 컴포넌트를 생성해줘: - 월간/연간 토글이 있는 3가지 요금제 단계(Starter, Professional, Enterprise) - Framer Motion을 사용하여 마우스 움직임에 반응하는 애니메이션 별 필드 배경 - 연간 결제로 전환 시 축하 색종이(Confetti) 애니메이션 - @number -flow/react를 사용한 부드러운 가격 전환 - 데스크톱에서 위로 올라오는 'Most Popular' 배지가 포함된 프로페셔널 카드 - 애니메이션 슬라이딩 필 효과가 있는 월간/연간 토글 - 스크롤 시 카드가 엇갈리며 나타나는 반응형 레이아웃 - 시맨틱 디자인 토큰을 사용한 모던한 블루 색상 테마"

https://9564a74b85ba4b6b877a95dcf70a26a8.prod.enterapp.pro

전문가 팁: 프롬프트를 Create, Generate, Refactor, Write, Design, 또는 List

와 같은 강력하고 능동적인 동사로 시작하세요.

EnterEnter

는 여러분의 프로젝트가 무엇인지, 누구를 위한 것인지, 목표가 무엇인지 전혀 알지 못합니다. '무엇을' 뒤에 숨겨진 '왜'를 반드시 제공해야 합니다.

나쁜 프롬프트 👎:

좋은 프롬프트 👍:

"디자이너를 위한 새로운 AI 컬러 팔레트 생성기 'Chroma'의 랜딩 페이지를 만들고 있습니다. 이 타겟층에게 깊은 인상을 줄 수 있도록 디자인은 미래지향적이고 예술적이며 고급스러워야 합니다. 은은한 애니메이션 그레이디언트 배경이 들어간 '글래스모피즘(glassmorphism)' 히어로 섹션을 원합니다. 단순한 '기능' 목록 대신, 사용자가 목업 UI 카드에 샘플 컬러 팔레트가 동적으로 적용되는 것을 볼 수 있는 인터랙티브 섹션을 넣고 싶습니다. 이것이 이 페이지의 핵심 셀링 포인트입니다."

https://a9e8f5c49fbf4b2ca5a7ed6db9253f69.prod.enterapp.pro

규칙 3: 일관성 유지하기 (나만의 "틀" 정의하기)

AI는 기본적으로 정해진 취향이 없습니다. 규칙이 없으면 AI는 엉망인 아티스트가 될 것입니다. AI가 활동할 수 있는 "틀", 즉 디자인 시스템을 정의해야 합니다. 이것이 세련되고 전문적인 앱을 만드는 비결입니다.

나쁜 사례 👎:

"파란색 CTA 버튼을 만들어줘."

"가격 결정 카드를 만들고 'Pro' 플랜을 강조해줘."

좋은 사례 👍:

"이 앱은 고급 금융 분석 도구이므로 테마는 '다크 모드 우선'이어야 하며, Bloomberg Terminal이나 Linear처럼 전문적이고 데이터 밀도가 높아야 합니다. 다음 규칙을 준수하세요: 테마: 다크 모드 전용. 배경: '#111111'. 메인 카드/모듈 배경: '#1A1A1A'. 타이포그래피: 모든 텍스트에 'Inter'를 사용하세요. 모든 숫자와 금융 데이터에는 'SF Mono'를 사용하세요. 강조 색상: 단 하나의 선명한 강조 색상 '#00F5D4'(밝은 청록색)를 사용하세요. 이는 기본 CTA와 활성 데이터 포인트에만 사용해야 합니다. 스타일: 테두리 반경(border-radius)은 없으며, 모든 요소는 날카로운 90도 모서리를 가져야 합니다. 구성 요소를 정의할 때는 그림자가 아닌 '#333333' 색상의 1px 테두리를 사용하세요."

https://41849c3aa6604b49a9b8a9a6e6cb5df4.prod.enterapp.pro

2부: enter.converge.ai플레이북 — 레고처럼 조립하기

이는 단순한 페이지가 아닌 전체 애플리케이션을 구축하기 위한 가장 중요한 전략입니다.

전략 1: 모놀리식이 아닌 모듈 방식으로 구축하기 (레고 방식)

이것이 초보자들이 저지르는 가장 큰 실수입니다. Enter가 전체 복잡한 애플리케이션을 한 번에 생성하도록 하지 마세요.

전문적인 접근 방식은 한 번에 하나의 완전한 화면이나 사용자 흐름을 만드는 것입니다.

나쁜 프롬프트 👎:

"에어비앤비 같은 앱을 만들어줘."

좋은 프롬프트 👍:

"우리의 에어비앤비 클론 서비스인 'Roam'을 위한 전체 사용자 예약 흐름을 만들어 봅시다. 화면 단위로 진행할 겁니다. 화면 1부터 시작하죠: 리스팅 상세 페이지. 이 화면에는 사진 그리드(에어비앤비처럼 메인 이미지 1개와 작은 이미지 4개), 오른쪽에는 예약/1박당 가격 모듈이 포함된 '고정(sticky)' 사이드바, 왼쪽에는 메인 콘텐츠 열이 필요합니다."

"좋습니다. 이제 화면 2를 만드세요: '결제 확인' 페이지. 사용자가 화면 1에서 '예약'을 클릭하면 여기로 이동합니다. 이 페이지에는 예약 요약, 가격 내역, 그리고 신용카드 입력을 위한 간단하고 보안성이 높은 양식이 필요합니다. 디자인은 전환율을 극대화할 수 있도록 매우 깔끔하고 신뢰감을 주어야 합니다."

https://26985927857e4d70be5075c634aae015.prod.enterapp.pro

전략 2: 예시 제공하기 (퓨샷 프롬프팅)

원하는 디자인 패턴을 말로 설명하기 어려울 때는 말로만 하지 말고 직접 보여주세요. 간단한 입력/출력 예시를 제공하여 Enter가 원하는 시각적 패턴을 학습하도록 하세요.

나쁜 프롬프트 👎:

"팀원 목록을 보여줘야 해."

좋은 프롬프트 👍:

"'Meet the Team' 페이지를 만들어야 합니다. 팀원 목록은 있는데, 특정 시각적 패턴을 적용하고 싶습니다. 패턴은 다음과 같습니다: 입력 패턴: [이름], [역할], [짧은 소개], [이미지 URL] 출력 패턴 (시각적 레이아웃): 카드를 생성하세요. [이미지 URL]은 3:4 비율이어야 하며 기본적으로 흑백 필터가 적용되어야 합니다. 상호작용: 마우스를 올리면 이미지가 컬러로 전환되고 약간 확대(scale 1.05)됩니다. 이미지 아래에는 'Inter' 폰트를 사용하여 대문자로 [이름]을 표시하고, 자간을 넓게(tracking-wide) 설정하세요. 이름 아래에는 세리프(serif) 폰트를 사용하여 이탤릭체로, 연한 회색의 [역할]을 표시하세요. * 이제 이 시각적 출력 패턴을 다음 데이터에 정확히 적용하세요: [팀원 3명 데이터...]. 그 후, 4개의 카드를 반응형 3열 그리드로 렌더링하세요."

https://203ec90377454c449b382cba0dd6dc99.prod.enterapp.pro

파트 3: 고급 기법 — AI를 당신의 파트너로 만들기

기본을 마스터했다면, 이 기법들을 사용하여 작업 흐름의 수준을 높여보세요.

기법 1: AI에게 질문하도록 요청하기

복잡한 앱 화면을 위해 충분한 세부 정보를 제공했는지 확신이 서지 않나요? 역할을 바꾸어Enter가 요구사항을 생성하도록 하세요.

나쁜 프롬프트 👎:

"사용자 프로필 페이지를 원해."

좋은 프롬프트 👍:

"사용자를 위한 전체 '계정 설정' 영역을 디자인하고 싶습니다. 여러 탭이 있는 복잡한 페이지가 될 것입니다. 구축을 시작하기 전에, 완벽한 디자인을 만들 수 있도록 필요한 섹션, 데이터 및 사용자 작업(계정 삭제를 위한 '위험 영역' 등)에 대해 5가지 핵심 질문을 해주세요."

기법 2: 아트 디렉터처럼 말하기

Enter는 전문 용어를 알고 있습니다. 업계 키워드를 사용하여 복잡한 미학을 빠르게 정의하세요.

나쁜 프롬프트 👎:

"내 사진을 보여줄 웹사이트를 만들어줘."

좋은 프롬프트👍

"고급 패션 사진작가를 위한 홈페이지를 구축해 주세요. 미학은 '에디토리얼(Editorial)'하고 '미니멀리스트'여야 합니다. 'Awwwards'나 'Vogue'에서 영감을 받은 전체 화면의 비대칭 '깨진 그리드(broken grid)' 레이아웃을 원합니다. 그리드는 상호작용이 가능해야 합니다: 사용자의 마우스가 이미지 위에 올라가면 이미지가 약간 커지고(예: scale 1.05) 흑백에서 풀 컬러로 전환되어야 합니다. 타이포그래피는 굵고 우아한 세리프 폰트('Playfair Display'와 같은)를 사용해야 하며, 일부 헤드라인은 이미지와 겹쳐야 합니다. 내비게이션은 왼쪽 상단 모서리에 고정된 아주 작고 미니멀한 산세리프 폰트여야 합니다."

https://d38e2d22eb6b4173b8adfefb7a02816a.prod.enterapp.pro

기법 3: 디버깅 방법 (문제가 발생했을 때)

앱에서Enter가 막히거나 시각적인 실수를 범했을 때, 단순히 "고쳐줘"라고 말하지 마세요. 수석 개발자처럼 가이드하세요.

스크린샷 제공 🌟: 이것이 가장 빠른 방법입니다. 오류가 발생한 섹션의 스크린샷과 오류 메시지를 업로드하세요.

"이 모바일 스크린샷에서 볼 수 있듯이, 카드들이 컨테이너 밖으로 넘치고 있습니다. 600px보다 작은 화면에서는 단일 열 flex 레이아웃이어야 합니다. 미디어 쿼리를 확인해 주세요."

이유 묻기 🌟:

"이 레이아웃 변화의 근본 원인은 무엇인가요? 간단한 용어로 설명해 주세요."

피벗 🌟:

"이 CSS Grid 방식은 실패한 것 같습니다. 완전히 다른 방식을 시도해 보죠. 이 섹션 전체를 Flexbox를 사용하도록 리팩토링하세요."

결론: 당신의 여정은 이제 막 시작되었습니다

프롬프팅은 예술이자 기술입니다. 배우는 가장 좋은 방법은 시행착오와 반복입니다.

실험하는 것을 두려워하지 마세요. 지시가 명확할수록, 문맥이 풍부할수록, 그리고 앱 화면이 모듈화될수록, 더욱 놀라운 결과를 얻게 될 것입니다.

이제 enter.converge.ai에 접속하여 첫 번째 프롬프트를 시도해 보세요!

부록: enter.converge.ai프롬프팅 치트 시트

프롬프트에 이 키워드들을 사용해 보세요. 이 키워드들은 Enter가 당신의 의도를 정확하게 이해하도록 도와줍니다.

Category	Keywords
Layout	`Responsive`, `Grid layout`, `Flexbox`, `Three-column layout`, `Sidebar`, `Navbar`, `Footer`, `Header`, `Full-width`, `Centered`, `Sticky`, `Split-screen`, `Masonry layout`, `Dashboard layout`, `Card-based layout`
Style	`Glassmorphism`, `Neumorphism`, `Minimalist`, `Techy`, `Corporate`, `Modern`, `Dark mode`, `Rounded corners`, `Shadow`, `Gradient`, `Brutalist`, `Playful`, `Editorial`, `Futuristic`, `Retro`, `Pastel`, `High contrast`, `Clean white`, `Colorful accents`
Component	`Modal`, `Popup`, `Date picker`, `Carousel`, `Slider`, `Accordion`, `Tabs`, `Breadcrumbs`, `CTA button`, `Form`, `Input field`, `Dropdown`, `Table`, `Pagination`, `Search bar`, `Sidebar menu`, `Chat bubble`, `Notification toast`, `Progress bar`, `Stepper`, `Timeline`, `Card`
Animation & Motion	`Hover animation`, `Fade-in`, `Slide-up`, `Parallax scrolling`, `Microinteraction`, `Smooth transition`, `Framer Motion`, `GSAP-like`, `Scroll-based reveal`, `Animated gradient`, `Looping hero video`, `Subtle hover glow`, `Animated icons`
Inspiration	`Inspired by Linear`, `Like Superhuman's onboarding`, `Airbnb-style grid`, `Bloomberg-style (data-dense)`, `Notion-like interface`, `Framer aesthetic`, `Apple-style marketing page`, `Stripe documentation look`, `Pitch deck vibe`, `Figma-like collaboration feel`