이번 글에서는 노코드로 박람회 참가기업 검색 앱을 만들게 된 배경과 전체 구조 설계 과정을 정리해봤어요.
저는 개발자가 아닌 비개발자로 AI 도구만으로 실제 작동하는 앱을 만들 수 있다는 걸 직접 경험했고, 그 과정을 시리즈로 남겨보려고 합니다.
1. 왜 박람회 참가기업 검색 앱을 만들게 됐나
박람회에 가기 전에 항상 같은 문제가 반복됐어요. 참가업체가 수백 개인데, 공식 홈페이지나 팜플렛에서는 단순 목록만 보여줄 뿐이니까요. “파우치 OEM 가능한 업체”, “친환경 포장재 제조사”처럼 내가 원하는 특별한 조건으로 검색하는 기능을 갖춘 곳이 없으니, 박람회 현장에서 직접 발품을 팔거나 사전에 업체를 일일이 클릭해서 확인하는 수밖에 없었어요. 그래서, 이번에 좀 더 박람회장 방문의 효율성을 높이고, 시간을 아끼기위해 노코드 AI 앱 만들기에 도전했어요.
2. 이 앱에서 만들 핵심
✅ 전시회 참가기업 목록 자동 수
✅ 업체별 주요제품, 연락처, 부스번호 DB 저장
✅ 키워드 검색 및 필터 기능
✅ 자연어 입력 시 AI가 관련 업체 추천 + 추천 이유 한 줄 표시
이번 앱의 핵심은 마지막 기능이에요. “파우치 만들 수 있는 업체 찾아줘”라고 입력하면 AI가 전체 업체 중 관련 있는 곳을 골라서 이유까지 설명해줘요. 단순한 기업 목록이 아니라 목적 기반 탐색 도구를 만드는 게 목표예요.
3. 사용한 기술 스택
노코드로 앱 만들기위한 여러 툴들을 살펴보던 중 v0, Supabase, n8n 조합으로 선택을 했는데요.
⚡ v0 (Vercel) — 프롬프트로 Next.js 기반 UI 자동 생성. 코드 없이 화면을 만들 수 있어요.
🗄️ Supabase — PostgreSQL 기반 DB. 업체 데이터를 저장하고 API로 불러와요.
🔄 n8n — 노코드 자동화 툴. 전시회 사이트 크롤링과 데이터 처리를 담당해요.
🤖 Claude API — 업체 정보를 분석해서 태그 생성 및 자연어 추천에 사용해요
🚀 Vercel — 완성된 앱 배포.
이 조합으로 개발경험이 없는 저도 실행 가능한 앱을 만들 수 있었어요. AI 도구가 코드 작성을 대부분 대신해줬거든요.
제작 기간은 대략 이틀 정도 소요되었습니다.
4. 전체 구조 설계
앱의 데이터 흐름은 아래와 같아요.
처음에는 모든 걸 한 번에 자동화하려고 했는데, 전시회 사이트마다 구조가 달라서 완전 자동화는 어려웠어요. 대신 전시회별로 크롤러를 한 번 설정해두면 이후에는 버튼 하나로 데이터를 수집할 수 있는 구조로 만들었어요.
5. 설계하면서 고민했던 점
가장 많이 고민한 부분은 검색 방식이었어요. 단순 키워드 검색만으로는 “PE 필름 생산업체”를 찾을 때 업체 소개에 “비닐 제조”라고 적혀있으면 못 찾는 문제가 있어요. 그래서 두 가지 방식을 모두 구현했어요.
🔍 키워드 검색 — 빠르고 무료. 정확한 단어가 있을 때 유용.
🤖 AI 자연어 추천 — 의미 기반으로 관련 업체 선별. 표현이 달라도 찾아줘요.
AI 추천은 Claude API를 사용해서 호출당 소액의 비용이 발생하지만, 개인 사용 기준으로 한 달에 1,000원 이하 수준이라서 선택했어요.
6. 완성된 결과 화면
앱에 접속하면 검색창과 빠른 AI추천 버튼이 보여요. 그리고, 이번 박람회에 참가하는 380여개의 기업 정보가 정리된 것을 먼저 확인할 수 있어요. 그리고, 검색창에 “친환경 소량 국내제작”과 같이 본인이 원하는 기술키워드를 입력하고, AI 추천 버튼을 누르면 관련 업체 정보와 추천 이유가 함께 카드 형태로 표시돼요. 각 카드에는 회사명, 부스번호, 주요제품, 홈페이지, 전화번호, 태그가 표시되는데, 오른쪽 위에는 부스번호를 확인할 수 있어요.
🔗 배포된 앱 주소: https://v0-exhibitor-search-page.vercel.app
7. 이 시리즈 전체 보기
📌 1편 — 전체 구조 설계 (현재 글)
- 2편 — v0로 UI 만들기 (링크 추가 예정)
- 3편 — Supabase DB 세팅 (링크 추가 예정)
- 4편 — v0와 Supabase 연결 (링크 추가 예정)
- 5편 — n8n으로 전시회 참가기업 목록 자동 수집 (링크 추가 예정)
- 6편 — n8n으로 업체 상세 정보 크롤링 (링크 추가 예정)
- 7편 — Claude API로 태그 자동 생성 (링크 추가 예정)
- 8편 — AI 자연어 추천 기능 구현 (링크 추가 예정)
- 9편 — 회고 + 확장 방향 (링크 추가 예정)
➡️ 다음 편 예고
2편에서는 v0를 사용해서 박람회 기업 검색 앱 UI를 만드는 과정을 설명해요. 어떤 프롬프트를 넣었는지, 어떻게 수정했는지, Vercel 배포까지 전 과정을 담을게요.