Enter를 사용하여 4시간 만에 AI 기반 개념 탐색기를 만든 방법

백엔드 경험이 없는 디자이너가 Enter.pro를 사용하여 구축한Essence— 어떤 개념이든 근본적인 구성 요소로 분해하는 AI 네이티브 캔버스 앱입니다. 아이디어 구상부터 AI 통합, 이중 언어 지원, 게임화된 경험을 갖춘 완전한 제품까지, 단 4시간 만에 완성했습니다.

계기

디자이너로서 저는 항상 한 가지 질문에 매료되었습니다. 창의성은 어디서 오는가?

디자인 방법론을 공부할수록 저는 같은 패턴을 발견했습니다. 창의성은 종종 해체와** 재조합**에서 시작된다는 것입니다. 무언가를 본질적인 부분으로 분해한 다음, 새로운 방식으로 다시 조립하는 것이죠.

그 아이디어가 Essence로 이어졌습니다. AI 기반의 개념 탐색 캔버스죠. 개념을 입력하면 AI가 이를 핵심 요소로 분해합니다. 그런 다음, 그 요소들을 재조합함으로써 새로운 아이디어가 떠오르기 시작합니다.

왜 Enter인가

저는 풀스택 개발자가 아닌 프로덕트 디자이너입니다. Essence를 구현하려면 어렵게 느껴지는 몇 가지 요소가 필요했습니다.

• 인터랙티브 캔버스: Figma나 Miro 같은 도구에서 볼 수 있는 복잡한 UI인 드래그 앤 드롭, 줌, 팬 기능

• AI 통합: 개념 분해 및 재조합 로직을 구동하기 위한 기능

• 서버리스 백엔드: AI API 호출을 안전하게 처리하기 위한 기능

• 배포: 사람들이 실제로 사용할 수 있도록 하기 위한 기능

LLM API 연결은 보통 API 키, 환경 설정, 인증 로직 등 때문에 비개발자들의 발목을 잡곤 했습니다.

Enter의 AI All 덕분에 저는 그저 “Claude Sonnet 4.5를 사용해 줘”라고 말하기만 했고, 백엔드 Edge Functions, 요청 포맷팅, 에러 핸들링까지 모든 것이 자동으로 연결되었습니다.

Enter.pro를 사용하면 인프라를 전혀 건드릴 필요가 없습니다. 원하는 것을 설명하기만 하면 React, Supabase, Edge Functions, 모델 통합까지 알아서 처리해 줍니다. 저는 그저 무엇을, 왜 만드는지에만 집중하면 됩니다.

빌드 과정: 4시간 동안의 5단계

1단계: 기반 구축

머릿속에 있던 아이디어를 하나의 포괄적인 프롬프트로 정리하여 Enter에 전달했습니다. 핵심은 다음과 같습니다.

"Essence"라는 AI 네이티브 캔버스 탐색 앱을 만드세요. 가벼운 사고 게임입니다. 핵심 메커니즘: 사용자가 단어를 입력하면 AI가 이를 정확히 2개의 원자적 개념으로 분해하여 캔버스 위에 이모지 + 짧은 단어 노드로 표시합니다. 분해 규칙: 항상 정확히 2개의 노드를 반환하며, 각각 1개의 이모지 + 1개의 짧은 단어를 포함합니다. 개념은 단계가 거듭될수록 감정, 동기, 에너지, 구조, 관계, 힘, 가치, 욕망, 갈등 같은 차원으로 더욱 본질적으로 파고들어야 합니다. 사용자는 2개의 노드를 선택하여 새로운 1개의 개념으로 재조합할 수도 있습니다. 캔버스는 무한 드래그, 줌, 더블 클릭 분해, 다중 선택 재조합을 지원합니다. 각 분해에는 1포인트, 재조합에는 2포인트가 소모됩니다.

이 프롬프트를 읽은 후, Enter가 가장 먼저 한 일은 AI 기능을 로드하는 것이었습니다. 그다음 저에게 직접 물었습니다. "개념 분해 및 재조합을 위해 어떤 AI 모델을 사용하시겠습니까?" 사용 가능한 옵션인 GPT-5.2 Pro, Gemini 3 Pro, Claude Sonnet 4.5를 나열하고 비용, 속도, 강점을 각각 주석으로 달아주었습니다. 저는 Claude Sonnet 4.5(지시 이행 및 창의적 작업에 탁월함)를 선택했고, Enter가 전체 API 연결을 자동으로 구성했습니다.

몇 분 후, 전체 프로젝트 구조가 완성되었습니다. TypeScript를 사용하는 React 18, 빌드 도구로 Vite, 스타일링을 위한 Tailwind CSS, @xyflow/react(캔버스용), 그리고 Claude API와 연결된 Supabase Edge Function이 준비되었습니다. 핵심적인 분해 및 재조합 로직은 첫 시도 만에 작동했습니다.

2단계: AI 로직 튜닝

이 과정은 전체 프로젝트에서 가장 중요하고 흥미로운 부분이었습니다. Essence가 흥미로운지 지루한지는 전적으로 AI 출력 품질에 달려 있기 때문입니다. 최종 코드는 AI 로직을 세 개의 독립적인 함수로 나누고, 각각 신중하게 설계된 프롬프트 전략을 적용했습니다.

문제: AI가 너무 "학구적"이었다는 점

첫 번째 버전이 작동한 후, AI의 결과물은 의도치 않게 매우 웃겼습니다. "가위(scissors)"를 입력하면 "집게 모양의 부속물(pincer appendages)"이나 "대칭적 진화(symmetrical evolution)"가 나왔고, "사랑(love)"을 입력하면 "신경전달물질(neurotransmitters)"이나 "양자 상태(quantum states)"가 나왔습니다. 기술적으로는 틀린 말이 아니었지만, 전혀 재미가 없었고 직관적이지도 않았습니다. 제가 원했던 경험이 아니었습니다.

#1 해결책 : AI에게 페르소나 부여하기

핵심적인 돌파구는 AI에게 명확한 시스템 역할을 설정하는 것이었습니다. "너는 분해 보조원이야"가 아니라**"너는 재미있는 분해 게임이야. 복잡한 것들을 간단한 구성 요소로 바꿔줘! 일상적인 단어를 사용해."**그 한 문장이 결과물의 스타일을 학술 논문에서 장난스러운 대화로 완전히 바꾸어 놓았습니다.

#2 해결책 : 긍정적인 예시 + 반례(Anti-Patterns) 제시

긍정적인 예시만으로는 충분하지 않다는 것을 깨달았습니다. AI가 가끔 다시 학술적인 모드로 돌아가곤 했기 때문입니다. 그래서 좋은 예시와 나쁜 예시를 동시에 포함했습니다.

**좋은 예시:**가위(Scissors) → 🔪 날 + 🔗 경첩 (경첩으로 연결된 두 개의 날) 커피(Coffee) → ☕ 뜨거운 물 + 🫘 원두 (뜨거운 물 + 커피 원두) 친구(Friend) → 👤 사람 + 🤝 신뢰 (서로 신뢰하는 사람들) 꿈(Dream) → 😴 잠 + 💭 상상 (잠잘 때 하는 상상)나쁜 예시 (너무 학술적임):❌ 집게 모양의 부속물, 대칭적 진화, 신경전달물질, 양자 상태

이러한 "긍정-부정 대조"는 AI에게 제가 원하는 톤을 매우 정확하게 이해시켰습니다.단순하고 직관적이며, 사람들이 미소 짓거나 "아하!" 하고 깨닫게 만드는 그런 톤 말이죠..

#3 해결책 : 세 가지 기능, 세 가지 전략

최종적인 AI 로직은 세 개의 독립적인 기능으로 나누어졌으며, 각 기능은 고유한 프롬프트 설계와 매개변수 조정이 적용되었습니다.

① 이모지 생성 (generateEmojiForConcept): 사용자가 개념을 입력하면, 별도의 AI 호출이 먼저 의미적으로 일치하는 이모지를 생성합니다. 시스템 역할은 "너는 이모지 생성기야. JSON으로만 출력해"로 설정하고, temperature는 0.7(창의성보다 정확도 우선)로 두었으며, few-shot 예시(돌 → 🪨, 불 → 🔥, 사랑 → ❤️)를 통해 안내합니다. 파싱에 실패하면 기본값인 ✨로 부드럽게 대체합니다.

② 개념 분해 (decomposeConcept): 핵심 기능입니다. 프롬프트는 AI가 "블록을 조립하듯 사물을 분해하도록" 안내하며, 정확히 2개의 노드(이모지 + 짧은 단어)와 한 문장의 설명을 반환합니다. Temperature는 이모지 생성보다 높은 0.8로 설정하여 더 창의적인 공간을 허용했습니다. 중요한 설계 결정은, 모든 요청마다 랜덤 시드(randomSeed)를 주입하는 것입니다. 이를 통해 같은 개념이라도 매번 다른 결과를 도출하여, 탐색에 진정한 "반복 플레이 가능성(replayability)"을 부여합니다.

③ 개념 재결합 (recombineConcepts): 가장 창의적인 부분입니다. 프롬프트는 이를 "게임처럼 생각해"라고 설정하며, 상상력이 풍부한 예시들을 제공합니다: 물 + 불 = 증기 ♨️, 밀가루 + 불 = 빵 🍞, 인간 + 날개 = 천사 👼, 슬픔 + 기쁨 = 인생 🎭. 결과는 "놀랍고, 통찰력 있으며, 약간 유머러스하고, 뻔하지 않은" 것이어야 합니다. 다양성을 위해 동일한 랜덤 시드 기법을 사용합니다.

#4 해결책 : 호버 설명을 통해 로직을 시각화하기

모든 AI 분해나 재결합은 간단한 설명을 함께 반환합니다. 이 텍스트는 노드에 직접 표시되지는 않지만(인터페이스를 미니멀하게 유지하기 위해), 노드의 데이터에 저장됩니다. 사용자가 노드에 마우스를 올리면, 전체 추론 과정을 보여주는 우아한 HoverCard가 나타납니다.

• 분해된 노드(에메랄드 라벨): 🎭 드라마 = 😢 갈등 + 👥 등장인물, 하단에 "드라마는 근본적으로 등장인물 간의 갈등이다"라는 설명

• 결합된 노드(보라색 라벨): 😴 잠 + 💭 상상 = 💫 꿈, 하단에 "잠자는 동안 하는 상상이 꿈이다"라는 설명

이 디자인은 정보 계층 구조를 아름답고 우아하게 만듭니다. 표면적으로는 미니멀한 이모지 카드만 보이지만, 깊이 들여다보면 AI의 사고 과정을 볼 수 있습니다.

결과

이러한 조정 과정을 거친 후, AI 출력 품질이 극적으로 변화했습니다:

❤️ 사랑 → 👤 사람 + 🤝 신뢰 (서로를 신뢰하는 사람들) ☕ 커피 → 🫘 원두 + ☕ 뜨거운 물 (뜨거운 물과 커피 원두의 만남) 💭 꿈 → 🔮 상상력 + 🔥 열망 (미래에 대한 불타는 비전) 🔥 불 + 💧 물 = ♨️ 증기 😴 잠 + 💭 상상력 = 💫 꿈

모든 분해는 "아하!" 하는 순간을 불러일으키고, 모든 재결합은 미소를 짓게 합니다. 이것이 바로 프롬프트 엔지니어링의 힘입니다. 더 많은 코드를 작성하는 것이 아니라, AI와 대화하는 올바른 방법을 찾는 것이 핵심입니다.

3단계: 인터랙션 다듬기

바로 이 지점에서 앱이 생명력을 얻기 시작했습니다:

• 노드 1개 선택 → "분해(Decompose)" 버튼 표시— 더 세부적으로 나누기

• Shift + 노드 2개 클릭 → "재결합(Recombine)" 버튼 표시— 두 가지를 합치기

• 노드 더블 클릭 → 즉시 분해— 빠른 탐색

• 처리된 노드 위에 마우스를 올리기 → AI의 추론 과정 확인(HoverCard로 표시)

또한 가벼운 게이미피케이션 요소를 추가했습니다. 사용자는 20포인트로 시작하며(분해 시 1포인트, 재결합 시 2포인트 소모), 어떤 경로를 탐색할지 고민하게 만드는 부드러운 제약을 부여했습니다. 포인트는 로컬에 저장되며 언제든 초기화할 수 있습니다.

4단계: UI 디자인 다듬기

기능이 작동하게 되자, 다음 목표는 Essence를 *느낌만큼 *보기에도 좋게 만드는 것이었습니다.

첫 번째 주요 디자인 결정은 타이포그래피였습니다. 저는 Bricolage Grotesque를 전역 폰트로 선택했습니다. 기하학적이고 현대적인 산세리프체인 이 폰트는 앱을 기본 시스템 폰트의 영역에서 즉시 끌어올려 독특한 브랜드 정체성을 부여했습니다.

노드 카드 비주얼은 여러 번의 반복 작업을 거쳤습니다. 최종 디자인은 모서리가 둥근 큰 직사각형 카드(rounded-2xl)에 앰버-50, 에메랄드-50, 바이올렛-50 같은 파스텔 톤 배경을 무작위로 적용하고, 시각적 앵커로서 큰 이모지를 넣은 뒤 하단에 짧은 단어 라벨을 배치하는 형태로 결정되었습니다. 캔버스는 마치 알록달록한 포스트잇들이 흩어져 있는 것처럼 가볍고 재미있으며 깔끔한 모습이 되었습니다.

입력창은 앱의 "첫인상"이기에 가장 높은 기준을 적용했습니다. 여기서 Enter의 Enter Components기능이 정말 빛을 발했습니다. 이 기능은 내장된 AI 컴포넌트 라이브러리로, 클릭 한 번으로 컴포넌트를 검색, 미리보기 및 추가할 수 있습니다. 검색창에 "ai"를 입력하자 claude-style-chat-input이라는 컴포넌트를 발견했습니다. 이는 우아한 스타일의 대화형 입력창이었습니다. "+ Add to Chat"을 클릭하자 Enter가 자동으로 프로젝트에 통합하고 기존 디자인 언어에 맞게 스타일을 조정했습니다. 단순한 HTML 입력창이 둥근 테두리, 부드러운 그림자, 인라인 버튼 레이아웃을 갖춘 세련된 대화형 입력 경험으로 즉시 변신하여 앱의 시각적 정체성과 완벽하게 조화를 이루었습니다.

처음부터 컴포넌트를 작성하거나 CSS를 수정할 필요가 없습니다. Enter Components를 사용하면 블록을 쌓듯이 고품질 UI를 구성할 수 있으며, Enter가 자동으로 스타일을 조정해 시각적 일관성을 유지해 줍니다.

마지막으로, 퀵 스타트 컨셉 카드세트(❤️ 사랑, 💰 돈, ⏰ 시간, 🌳 나무, 🎵 음악, 💭 꿈)를 추가했습니다. 시작 화면에 기울어진 알록달록한 미니 카드로 표시되어 사용자가 무엇을 입력할 수 있는지 즉시 이해할 수 있도록 초기 진입 장벽을 낮췄습니다.

5단계: 국제화

Essence는 글로벌 사용자를 위해 구축되었으므로 중국어-영어 이중 언어 지원은 선택이 아닌 필수였습니다.

하지만 국제화는 단순히 UI 텍스트를 번역하는 것만이 아닙니다. Essence에서는 AI 출력값도 사용자가 선택한 언어와 일치해야 합니다. 예를 들어, 중국어 모드에서 "爱"를 분해하면 "人 + 信任"과 같은 중국어 결과가 나와야 하며, 영어 모드로 전환하여 "Love"를 분해하면 "Person + Trust"가 나와야 합니다. 이는 프론트엔드 언어 토글 설정이 AI 프롬프트 계층까지 전달되어야 함을 의미합니다.

구현을 위해 Zustand를 사용하여 가벼운 언어 상태 관리를 처리했습니다. 전체 i18n 시스템은 다음과 같이 작동합니다: 사용자가 우측 상단의 언어 토글을 클릭 → 전역 상태 업데이트 → 모든 UI 텍스트 즉시 변경 → AI 호출 시 현재 언어 매개변수 전달 → 프롬프트 템플릿이 중국어 또는 영어 버전 선택 → AI 결과가 자동으로 사용자의 언어와 일치하게 출력. 언어 설정은 localStorage에도 저장되어 다음 방문 시 원활하게 복구됩니다.

Enter에서는 이 모든 과정을 단 한 줄의 설명만으로 해결했습니다: "우측 상단에 언어 버튼이 있는 중국어/영어 토글을 추가해 줘. 모든 UI 텍스트, AI 프롬프트, AI 출력 결과가 선택한 언어에 따라 자동으로 바뀌어야 해." Enter는 상태 관리부터 프롬프트 템플릿 분기, 로컬 저장까지 전체 파이프라인을 단번에 구축해 주었습니다.

이것은 또한 중요한 교훈을 확인시켜 주었습니다: i18n은 일찍 도입할수록 좋습니다. 모든 기능을 완성한 뒤에야 국제화를 추가하려고 하면, 프롬프트 곳곳에 하드코딩된 텍스트와 모든 컴포넌트에 녹아든 UI 문자열을 발견하게 될 것이며, 이를 사후에 수정하는 것은 매우 고통스러운 작업입니다. 처음부터 다국어 아키텍처를 구축하세요. 그러면 나중에는 단순히 번역 콘텐츠만 추가하면 됩니다.

---

Essence가 특별한 이유

분해(Decompose): 모든 것의 보이지 않는 구조를 파악하세요

단어를 입력하세요. AI가 이를 정확히 2개의 원자적 개념으로 분해하며, 각 개념에는 의미를 담은 이모지와 한 문장 설명이 포함됩니다. 계속해서 분해해 보세요. 개념 트리가 눈앞에서 자라나는 것을 지켜보세요.

🎭 드라마 → 😢 갈등 + 👥 등장인물 😢 갈등 → ⚡ 긴장감 + 🎯 목표 👥 등장인물 → 👤 사람 + 💬 이야기

재결합(Recombine): 기존의 원자로 새로운 아이디어를 창조하세요

캔버스에서 임의의 노드 2개를 선택하세요(완전히 다른 가지에 있는 것이라도 좋습니다). 그리고 그것들을 결합해 보세요. AI가 놀라운 연결 고리를 찾아낼 것입니다.

🔥 불 + 💧 물 = ♨️ 증기 😴 수면 + 💭 상상력 = 💫 꿈 👤 사람 + ✈️ 날개 = 👼 천사

생각만 하지 말고, 즐기세요

20포인트 시스템은 추상적인 탐구를 즐거운 게임으로 바꿔줍니다. 클릭 한 번이 곧 선택입니다. 어떤 가지를 탐험할까요? 어떤 원자를 결합할까요? 이것은 호기심을 위한 샌드박스입니다.

기술 스택 — Enter가 구축함

저는 이 중 무엇 하나 수동으로 설정하지 않았습니다. Enter.pro가 제 설명과 반복적인 프롬프트를 바탕으로 전체 스택을 구성했습니다.

얻은 교훈

1. 2단계 프롬프팅, 두 가지 사고방식

Enter로 AI 앱을 구축하는 것은 동시에 두 가지 대화를 나누는 것과 같습니다. Enter와 대화하는 것은 풀스택 엔지니어와 협업하는 것과 같아서 명확한 요구 사항이 필요하며, 앱 내의 Claude와 대화하는 것은 창의적인 파트너와 협업하는 것과 같아서 감성적인 지도와 예시 기반의 교육이 필요합니다. 두 단계 모두를 올바르게 설정하는 것이 진정한 기술입니다.

2. AI에게 규칙뿐만 아니라 성격을 부여하세요

시스템 역할을 "당신은 개념 분해 보조자입니다"에서 "당신은 재미있는 분해 게임입니다"로 변경한 것만으로도 전체 출력 스타일이 단 한 문장 만에 바뀌었습니다. 규칙은 형식을 제한하지만, 성격은 품질을 결정합니다.

3. 긍정적인 예시 + 안티 패턴이 긴 설명보다 낫습니다

✅ 가위 → 날 + 경첩 ❌ 집게 모양 부속물, 대칭적 진화, 신경전달물질

이 세 줄은 100단어의 설명보다 더 많은 것을 전달합니다. 긍정적-부정적 대조는 가장 저평가된 프롬프트 엔지니어링 기법입니다.

4. 랜덤 시드는 탐험형 제품에 재플레이 가능성을 부여합니다

동일한 개념이라도 매번 다른 결과를 내놓습니다. 오늘은 "사랑 = 사람 + 신뢰"였지만, 내일은 "사랑 = 취약함 + 용기"가 될 수 있습니다. 랜덤 시드와 temperature 0.8을 조합하면 품질을 유지하면서 다양성을 극대화할 수 있습니다. 탐험형 제품의 생명력은 "매번 새로운 경험"에 있습니다.

5. 제약이 놀이를 만듭니다

20포인트 시스템은 목적 없는 클릭을 전략적인 탐구로 바꾸었습니다. 고전적인 게임 디자인 원칙이죠: 의미 있는 선택은 제한된 자원을 필요로 합니다.

6. 제대로 된 바이브 코딩(Vibe Coding): 한 번에 한 단계에만 집중하세요

기본 토대 마련 → AI 성격 부여 → 상호작용 다듬기 → 시각 디자인 → i18n 순서입니다. 각 단계는 한 가지 차원에만 집중하며, 이를 통해 Enter와의 대화를 명확하게 유지하고 결과를 예측 가능하게 만듭니다.

🔗 Enter로 직접 만들어 보세요: enter.converge.ai