아이디어를 웹 앱으로 구현하기: AI 추천 서비스 개발 과정
"어떤 AI를 써야 할까?" - 개발의 시작점
요즘 같은 AI 시대에, 쏟아지는 AI 모델들 속에서 길을 잃은 듯한 기분을 느끼신 적 없나요? 저 또한 그랬습니다. 대부분의 AI 서비스는 영문 기반으로 시작하기에, 그 기능과 특징을 한글로 명확히 알기 어려웠습니다. AI에 이제 막 입문하여 정보를 한창 습득하는 입장에서, 저와 같은 분들에게 작은 실마리라도 되고 싶다는 생각이 들었습니다.
그래서 'AI 서비스의 정보를 한눈에 보고, 원하는 기능에 따라 쉽게 필터링할 수 있으면 좋겠다'는 아이디어를 떠올렸습니다. 이 아이디어를 잘 정리된 정보가 담긴 이미지 한 장과 함께 Google의 Gemini에게 설명했더니, 놀랍게도 순식간에 웹 앱의 프로토타입을 만들어주었습니다. 그 과정을 공유합니다.
아이디어를 코드로, 상상을 현실로
1단계: Gemini가 이미지에 숨겨진 '구조'를 찾아내다
가장 먼저, Gemini는 제가 제공한 이미지의 시각적 정보를 컴퓨터가 이해할 수 있는 논리적 데이터로 재해석했습니다. 표의 각 행을 개별 'AI 서비스'로, 각 열을 '분류(category)', '추천 내용(recommendation)', '모델명(modelName)'이라는 속성으로 정리하여 체계적인 자바스크립트 객체 배열을 만들어냈습니다. 이것이 바로 앱을 움직이는 핵심 데이터가 되었습니다.
const aiServices = [
{ category: '텍스트/콘텐츠 생성 AI', recommendation: '맞춤형 챗봇 제작, 내게 맡기세요!', modelName: '챗GPT(ChatGPT)' },
{ category: '이미지 생성형 AI', recommendation: '다재다능한 이미지 생성&편집기', modelName: '디자이너(Designer)' },
// ... 그리고 나머지 데이터들
];2단계: Gemini가 사용자를 위한 '무대'를 만들다
데이터가 준비되자, Gemini는 사용자가 정보를 편하게 보고 즐길 수 있는 무대를 만들었습니다. 웹페이지의 기본 구조를 HTML로 설계하고, `Tailwind CSS`를 활용해 빠르고 세련되게 디자인했습니다. 복잡한 CSS 코드 없이도 직관적이고 깔끔한 인터페이스를 구축하여, 사용자가 기능 자체에 집중할 수 있도록 했습니다.
- 헤더(`header`): 앱의 정체성을 알려주는 공간
- 필터 버튼 영역(`div#category-filters`): 사용자의 '선택'이 이루어지는 공간
- 결과 그리드 영역(`div#results-grid`): 선택의 '결과'가 펼쳐지는 공간
3단계: Gemini가 불어넣은 '생명력', JavaScript
마지막으로, Gemini는 자바스크립트를 통해 정적인 무대를 동적인 앱으로 바꾸는 과정에 착수했습니다.
첫째, 스스로 만들어지는 필터 버튼: 데이터에 어떤 카테고리가 있는지 분석하여, 그 종류만큼 버튼을 자동으로 생성하도록 코드를 작성했습니다. 덕분에 나중에 새로운 분류의 AI 서비스가 추가되더라도, 코드를 고칠 필요 없이 앱이 알아서 새로운 필터 버튼을 만들어낼 것입니다. '확장성'을 고려한 설계입니다.
둘째, 클릭에 응답하는 렌더링 엔진: `renderResults`라는 핵심 함수를 만들어, 사용자가 버튼을 클릭할 때마다 어떤 일이 벌어져야 하는지를 정의했습니다. 이 함수는 사용자가 선택한 카테고리에 해당하는 데이터만 골라내어, 디자인된 카드 형태로 화면에 즉시 보여주는 역할을 합니다.
셋째, 사용자를 위한 작은 배려: 현재 어떤 필터가 선택되었는지 사용자가 명확히 알 수 있도록, 클릭된 버튼의 색상을 바꾸는 시각적 피드백을 추가했습니다. 이런 작은 디테일이 모여 앱의 완성도와 사용자 경험을 향상시킵니다.
결과물: 모두를 위한 AI 나침반
이러한 과정을 통해, 저의 처음 아이디어는 Gemini의 도움으로 모든 사람이 유용하게 쓸 수 있는 인터랙티브 웹 앱으로 완성되었습니다. 이 프로젝트는 AI의 홍수 속에서 방향을 찾고자 했던 작은 아이디어 하나가, 구체적인 계획과 기술을 만났을 때 어떻게 실용적인 결과물로 발전할 수 있는지 보여주는 과정이었습니다.
이제는 좋은 아이디어만 있다면 Gemini와 같은 AI 도구를 활용해 누구나 쉽게 자신만의 서비스를 만들 수 있는 시대가 되었습니다. 여러분도 생활 속에서 발견한 아이디어를 직접 실현해 보는 것은 어떨까요?