Codex와 Gencow로, 사진 한 장에서 컬러 팔레트를 뽑는 PaletteMood AI 만들기

코딩 없이 Codex와 Gencow로 배포한 컬러 팔레트 웹앱, PaletteMood AI

목차

1. Codex와 Gencow로 시작한 이유
2. 직접 코딩보다 중요한 기획 정리
3. PaletteMood AI의 핵심 기능
4. Codex와 함께 만든 화면과 로직
5. Gencow로 배포하며 배운 점
6. 최종 결과와 회고

1. Codex와 Gencow로 시작한 이유

작은 웹 서비스를 만들 때 가장 중요한 순간은 아이디어가 실제 URL이 되는 순간이라고 생각한다. 이번 프로젝트에서는 그 과정을 Codex와 Gencow를 함께 사용해서 진행했다. 내가 직접 코드를 한 줄씩 작성하기보다, 만들고 싶은 기능과 화면 방향을 Codex에게 설명하고, 생성된 프로젝트를 다듬고, Gencow로 배포까지 가져가는 방식이었다. 말 그대로 “코딩을 배워서 직접 구현했다”기보다는 “AI와 대화하면서 웹앱을 완성했다”에 가까운 경험이었다.

이번에 만든 PaletteMood AI는 사진을 올리면 이미지에서 주요 색상을 추출하고, HEX 코드와 무드 키워드, 디자인 활용 제안을 보여주는 디자인 도구다. 참고한 Gencow 관련 자료에서도 인상적이었던 부분은 복잡한 설정보다 “아이디어를 빠르게 사이트로 만들고 배포까지 이어가는 흐름”이었다. 그 관점을 그대로 따라가되, 내용은 내가 만든 프로젝트에 맞게 정리했다.

2. 직접 코딩보다 중요한 기획 정리

처음에는 기능을 더 많이 넣고 싶었다. 로그인 기능을 붙이고, 이미지를 저장하고, 유저별로 팔레트 갤러리를 관리하는 풀스택 앱을 생각했다. 하지만 실제로 만들다 보니 이 앱에서 가장 중요한 것은 저장이 아니라 즉시성이었다. 사용자는 사진을 올리고, 색을 확인하고, 마음에 드는 HEX 코드를 복사하면 된다. 그래서 로그인과 저장 기능을 과감히 제거했다. 덕분에 앱의 흐름은 훨씬 단순해졌다. 최종 헤드라인도 짧게 바꿨다.

Colors from any image.

사진에서 색을 얻는다. 이 문장 하나면 앱의 목적이 충분히 전달된다고 느꼈다.

 

3. PaletteMood AI의 핵심 기능

디자인 작업을 하다 보면 색을 고르는 일이 생각보다 오래 걸린다. 브랜드 무드를 잡을 때도, 포스터나 썸네일을 만들 때도, 인테리어 레퍼런스를 정리할 때도 “이 이미지의 느낌을 색으로 바꾸면 무엇일까?”라는 질문을 자주 하게 된다. 사람이 직접 스포이드로 색을 찍을 수도 있지만, 이미지 안에는 눈에 바로 보이지 않는 중간색이 많다. 밝은 사진 안에도 회색, 베이지, 낮은 채도의 파랑이 섞여 있을 수 있고, 따뜻해 보이는 사진 안에도 어두운 보라나 초록이 숨어 있을 수 있다.

PaletteMood AI는 이 과정을 빠르게 도와주는 도구다. 사용자가 이미지를 올리면 앱은 5~7개의 주요 색상을 추출하고, 큰 컬러 스와치와 함께 HEX 코드를 보여준다. 처음에는 컬러 이름도 함께 보여주려고 했다. Ivory, Sage, Cobalt 같은 이름이 붙으면 보기에는 예쁘다. 하지만 실제 사용 흐름을 생각해보니 이름보다 코드가 더 중요했다. 디자인 도구에서 사용자가 바로 가져가는 값은 결국 HEX 코드다. 그래서 최종 버전에서는 컬러 이름을 제거하고, 색 자체와 복사 가능한 코드에 집중했다.

4. Codex와 함께 만든 화면과 로직

프론트엔드는 Vite + React 기반으로 구성했다. 여기서 중요한 점은 내가 모든 코드를 직접 타이핑한 것이 아니라, Codex에게 요구사항을 설명하고 생성된 코드를 검토하면서 방향을 잡았다는 것이다. 상단에는 PaletteMood AI라는 이름과 “Colors from any image.”라는 헤드라인이 있고, 왼쪽에는 이미지 업로드 영역, 오른쪽에는 결과 영역이 있다. 이미지를 올리기 전에는 빈 상태 메시지를 보여주고, 이미지를 올리면 미리보기와 컬러 팔레트가 나란히 나타난다.

UI를 만들 때 가장 신경 쓴 부분은 색을 크게 보여주는 것이었다. 이 앱에서 주인공은 설명 문구가 아니라 팔레트다. 그래서 컬러 스와치를 작게 나열하지 않고, 화면에서 크게 보이도록 만들었다. 각 스와치에는 HEX 코드 버튼이 들어간다. 버튼을 누르면 클립보드에 코드가 복사되고, 잠깐 “Copied”라는 피드백이 뜬다. 아주 작은 기능이지만 실제 도구처럼 느껴지게 만드는 중요한 디테일이었다.

모바일 화면도 신경 썼다. 휴대폰에 저장된 사진을 바로 올려보고 싶은 경우가 많기 때문이다. 그래서 작은 화면에서는 업로드 영역과 결과 영역이 세로로 쌓이도록 만들고, 이미지 미리보기와 컬러 스와치가 서로 겹치지 않게 정리했다.

 

현재 버전은 브라우저에서 이미지 분석을 처리한다. 사용자가 파일을 올리면 이미지를 캔버스에 그리고, 픽셀 데이터를 읽어 색상을 버킷으로 묶는다. 너무 검거나 너무 밝은 픽셀은 제외하고, 일정 간격으로 샘플링해서 대표 색상을 찾는다. 비슷한 색이 여러 번 반복되지 않도록 색상 간 거리도 계산한다. 이렇게 하면 이미지 전체에서 눈에 띄는 색을 5~7개 정도로 정리할 수 있다.

무드 키워드는 평균 색상, 채도, 밝기, 따뜻함 정도를 바탕으로 추론한다. 붉은 계열이 강하면 warm, 녹색이 두드러지면 natural, 밝고 채도가 낮으면 minimal 같은 식이다. 키워드는 calm, warm, playful, minimal, vintage, energetic, elegant, cozy, futuristic, natural처럼 제한된 목록에서만 나오도록 했다. AI 기능을 만들 때도 마찬가지지만, 결과의 범위를 어느 정도 정해두면 사용자가 더 쉽게 이해할 수 있다.

디자인 제안도 길게 쓰지 않았다. 가장 강한 두 색을 브랜드 조합으로 쓰고, 가장 어두운 색은 버튼이나 고대비 타이포그래피에 활용하라는 식으로 실용적인 문장만 남겼다. 이 앱은 감상용 결과물을 만드는 서비스라기보다, 바로 디자인 작업에 가져갈 수 있는 힌트를 주는 도구에 가깝다.

이 부분을 만들면서 느낀 점은 “AI처럼 보이는 것”보다 “쓸 수 있는 결과를 주는 것”이 더 중요하다는 점이었다. 너무 많은 색이나 키워드는 오히려 선택을 어렵게 한다. 그래서 색상 수를 제한하고, 키워드도 정해진 목록 안에서만 나오게 했다.

5. Gencow로 배포하며 배운 점

화면과 기능을 만든 뒤에는 Gencow를 배포 흐름에 연결했다. Codex가 프로젝트 구조와 필요한 명령을 정리해주고, 나는 터미널에서 빌드와 배포를 실행하는 방식으로 진행했다. 실제 작업에서는 현재 폴더를 Gencow 프로젝트로 초기화하고, codegen을 실행한 뒤 Vite 빌드를 만들었다.

npx gencow init . --force --template default
npx gencow codegen
npm run build

처음에는 npx gencow deploy --static dist/ --force 명령으로 백엔드와 정적 파일을 함께 배포했다. 앱은 생성됐고 서버 빌드도 완료됐지만 readiness 체크가 503으로 실패했다. 앱 상태는 running이었지만, 루트 URL에서는 React 앱이 아니라 백엔드 관련 JSON이 보였다. 그래서 정적 프론트만 다시 배포했다.

npx gencow static dist/ --force

이후 최종 URL에서 Vite가 만든 index.html이 정상적으로 반환됐다. 여기서 배운 점은 분명했다. 풀스택 배포에서 “서버가 떠 있다”와 “사용자가 보는 프론트가 열린다”는 다른 문제다. 최종 URL이 React 앱을 보여주는지 반드시 확인해야 한다. 실제로 curl로 URL을 확인했을 때 React 번들과 CSS 파일이 포함된 HTML이 반환되는 것을 보고 배포가 제대로 됐다고 판단했다.

배포 과정에서 Gencow 앱 ID는 slim-tarn-9783으로 생성됐다. 배포 후에는 단순히 CLI 출력만 믿지 않고 URL 응답을 직접 확인했다. 처음에는 백엔드 런타임 관련 JSON이 나왔고, 정적 배포를 다시 실행한 뒤에야 React HTML이 반환됐다. 이 경험 덕분에 앞으로는 배포 후 확인 순서를 더 명확히 가져갈 수 있을 것 같다. 빌드 성공, codegen 성공, 앱 상태 running, 최종 URL HTML 응답까지 확인해야 진짜 배포 완료라고 말할 수 있다.

[이미지 3: Gencow 정적 배포 완료 화면 또는 배포 URL 결과 화면]

6. 최종 결과와 회고

최종 배포 URL은 다음과 같다.

https://slim-tarn-9783.gencow.app

지금의 PaletteMood AI는 단순하다. 로그인도 없고, 저장도 없다. 사진을 올리고, 색을 확인하고, HEX 코드를 복사하고, 무드와 디자인 제안을 참고한다. 처음에는 “풀스택 앱답게” 더 많은 기능을 넣고 싶었지만, 실제 사용 흐름을 생각해보니 핵심은 빠른 분석과 복사였다. 기능을 더하는 것보다 덜어내는 선택이 더 좋은 결과를 만들 때가 있다는 걸 느꼈다.

기술적으로는 Vite + React 기반 화면, 브라우저 캔버스 색상 분석, Gencow 배포가 들어갔다. 하지만 이번 프로젝트의 핵심은 기술을 내가 전부 외워서 썼다는 데 있지 않다. Codex와 대화하면서 요구사항을 정리하고, 필요 없는 기능을 덜어내고, Gencow로 실제 URL까지 만든 경험이 더 중요했다. 다음 단계로는 Gencow AI Engine을 실제 이미지 분석 흐름에 붙여 무드 해석을 더 자연스럽게 만들 수 있을 것 같다.

이번 프로젝트에서 가장 마음에 들었던 결정은 기능을 줄인 것이었다. 처음 계획대로 로그인과 저장을 넣었다면 더 복잡한 앱처럼 보였을 수는 있다. 하지만 사용자가 원하는 순간은 팔레트를 저장하는 순간보다 색을 발견하는 순간에 더 가까웠다. 그래서 지금의 PaletteMood AI는 사진을 색으로 바꾸는 짧은 흐름에 집중한다. 작은 서비스일수록 이런 판단이 중요하다는 걸 다시 느꼈다.

앞으로 비슷한 프로젝트를 만든다면 처음부터 “사용자가 마지막에 가져가는 값이 무엇인가”를 먼저 정리할 것 같다. 이 앱에서 그 값은 저장된 데이터가 아니라 복사 가능한 HEX 코드였다. 그 기준이 생기니 화면도, 기능도, 배포 목표도 훨씬 선명해졌다.