소개
신규로 등장하는 생성형 AI 서비스들을 한눈에 볼 수 있는 디렉토리 웹사이트를 만들었습니다.
이 프로젝트의 목표는 흥미로운 AI 툴들을 트래킹하고, 유저에게 쉽게 보여주는 구조를 만드는 것이었습니다.
시도하고자 했던 것과 그 이유를 알려주세요.
>> 생성형 AI 서비스들의 디렉토리 웹사이트를 만들고, 새로운 소식을 트랙킹 & 노출 위함
>> 목적: 신규 서비스 트랙킹을 위한 서비스구현.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
->> ChatGPT(질의응답형식의 기획서 작성) + Lovable(실제구현 및 제작요청) + n8n(제작예정)
<1차 프롬프트 - 기획서 (ChatGPT)>
아래 내용을 적용해서 웹서비스를 즉시 만들어줘.
AI 프로젝트 디렉토리 플랫폼 기획서
1. 개요 및 비전
프로젝트명: "AI 아틀라스(AI Atlas)"
비전 선언문: AI 아틀라스는 전 세계 AI 프로젝트와 도구를 탐색하고, 비교하고, 발견할 수 있는 최고의 중심지가 될 것입니다. 우리는 최고의 사용자 경험을 통해 간결한 개요에서 심층 분석까지 원활하게 전환되는 발견 여정을 제공합니다.
핵심 가치 제안:
통합성: 단일 플랫폼에서 수천 개의 AI 프로젝트 탐색
정보 계층화: 간결한 요약에서 심층 분석까지 자연스러운 정보 흐름
커뮤니티 기반: 실제 사용자 평가, 리뷰 및 사용 사례
최신성: 자동화된 모니터링으로 최신 정보 유지
2. 시장 및 타겟 사용자 분석
타겟 페르소나 A,B,C,...
시장 분석
현재 경쟁 환경:
단편적인 AI 도구 리스트 웹사이트 다수
깊이 있는 분석이 부족한 표면적 디렉토리
사용자 리뷰/평가가 미흡한 기업 중심 정보
차별화 기회:
정보 계층화를 통한 사용자 경험 혁신
실제 사용자 데이터 기반 신뢰 구축
커뮤니티 참여를 통한 지속적 정보 최신화
3. 기능 및 콘텐츠 구조
핵심 기능 개요
AI 프로젝트 디렉토리
간략 카드 뷰 → 상세 프로필 → 심층 분석
맥락 기반 정보 확장/축소
비교 기능 (최대 5개 프로젝트)
사용자 참여 시스템
평점 및 리뷰 (검증된 사용자)
확장된 설명 (3-5 문단)
주요 기능 리스트 (불릿 포인트)
핵심 스크린샷 갤러리 (3-5장)
4. 사용자 경험(UX) 설계
핵심 UX 원칙
점진적 공개(Progressive Disclosure)
.......
.........
12. 결론 및 비전
AI 아틀라스는 단순한 디렉토리를 넘어, AI 생태계의 지식 허브이자 의사결정 플>> ChatGPT를 활용해서, 질의응답 형식으로 내가 원하는 방향성에 맞게 토론을 진행하고, 결과물 기획서를 만들어서, Lovable에게 웹페이지 개발 요청했습니다.
< 1차 디자인 결과물 - Lovable >
Link https://preview-04eb904b--atlas-ai-discover.lovable.app/
>> 원하는 카드뉴스 형식의 디렉토리 구조였지만, 메인페이지에서 프로젝트가 보이지않아서, 수정요청 진행함
<수정 요청 프롬프트>
디자인이랑 구성은 몹시 마음에 드는데, 유저들이 들어오자마자프로젝트 리스트들을 볼수있었으면 좋겠어. 그래서 약간 작은사이즈로 잘볼수있도록 올려주고, 메뉴바에 서치는 없애주고, 실제 프로젝트들의 리스트 들에서 UX를 잘 고려해서 검색기능을 상단에 올려ㅑ줘< 2차 결과물 - Lovable >
link https://preview-26c3190d--atlas-ai-discover.lovable.app
>> 2회만에 원하는 프레임은 만들었으므로, n8n을 활용하여 백엔드에 작업을 시작하기로 했습니다.
>> 디자인이 원하는 방향이라, n8n으로 워크플로우를 만들어보기로 하고 Lovable 제작은 중단함.
아래는 Lovable로 제작한 예시입니다. - 미완성본. 웹 구조만 참고용으로 공유드려요!
<Reference>
웹3 벤처 캐피탈들의 시각화를 표현한 데이터 대시보드 웹사이트 link
나의 소셜미디어 채널을 한눈에 보고 운영관리하는 대시보드 link
어필리에이트 마케팅 에이전시 랜딩페이지 link
AI 프로젝트 디렉토리 웹사이트 - 컨셉A link
AI 프로젝트 디렉토리 웹사이트 - 컨셉B link
AI 프로젝트 디렉토리 웹사이트 - 컨셉C link
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
[프롬프트 고도화] 깔끔하고 보다 정확한 결과물을 위해서는 디테일한 프롬프트가 필요한데, 1차적으로 간략한 SRS(요구 사항 명세서)급의 정리가 필요하다.
[용어활용] UI 컴포넌트인 라디오박스, 토글 등 기타 용어를 알면, 조금 더 활용하기 수월하다.
[n8n] 로컬에서 작업 시, 저장은 필수 필수 필수요소
과정 중에 어떤 시행착오를 겪었나요?
[Lovable] 원하는 디자인 색상 및 고퀄리티 디자인 색감을 구현을 원했으나, 방법을 찾지 못함.
[n8n] 로컬 설치는 성공했지만, 로컬에서 작업중 저장을 하지않아 사라짐 ㅋ_ㅋ
[n8n] 구글 API를 활용할 때에는 각 노드별로 구글 콘솔 대시보드에서 각각 사용함을 선택 해, '개별로 허용을 해주어야함'
e.g. Google Sheet API - 사용함 활성화
e.g. Google Drive API - 사용함 활성화
앞으로의 계획이 있다면 들려주세요.
[일반] 다양한 서비스 MVP 구현
[n8n] n8n으로 자동화 플로우 습득 & 고도화
[Agency] Lovable을 활용한 웹디자인 자동화
[Data Dashboard] 원하는 데이터를 realtime으로 표기해주는 데이터 대시보드 구현
강의 내에 메모 내용
가장 많이 활용하는 것 중 하나다 'Set' - 데이터 전처리를 드래그 앤 드랍으로 활용
[Skill] 컨택스트를 매우 디테일 하게 잘 넣어줘야함. (response data 및 form 등)
[Skill] 예시 response 데이터를 넣을것
UI 구성은 스크린 캡쳐로 보여줄 것.
