* ColorType: AI 기반 컬러 & 폰트 시각화 웹앱(https://buly.kr/6XlhOwr)
* ColorType 앱 구조와 데이터 흐름도
1. 앱 개요
1.1 제작 배경 🌱
(옵린이로서) Obsidian에서 헤딩 스타일링을 하며 불편함을 경험
Canva를 사용한 디자인 작업에서도 동일한 문제가 발생
색상과 폰트를 실시간으로 조합하고 확인하는 도구의 필요성 인식
기존 도구들은 색상과 폰트를 각각 적용 및 확인하고, 선택에서 전문적인 지식이 필요한 경우 있음.
AI가 색상을 추천하고, 사용자가 폰트와 함께 실시간으로 시각화할 수 있는 웹앱을 Google Apps Script로 제작하고 배포할 것을 구상
1.2 제작 목표 🎯
다양한 디바이스에서 원활하게 작동하는 반응형 웹앱
AI를 코딩 도구로만 사용하지 않고, 앱 기능 내에 AI가 작동하도록 구현
실시간 AI 상호작용으로 사용자에게 즉각적인 피드백을 제공
직관적이고 사용자 친화적인 UI/UX를 통해 누구나 쉽게 색상 및 폰트를 시각화하고 선택 가능
Apps Script를 활용한 빠르고 간편한 배포
2. 앱 기획
2.1 앱의 핵심 기능 💡
실시간 색상 시각화
4가지 기본 컬러 선택기 제공: Main(주요 헤딩), Sub(보조 헤딩), Point(강조), Base(기본)
배경색: 실시간 변경, 웨이브 애니메이션 적용
AI 팔레트 추천
4가지 팔레트 타입 제공: Calm, Simple, Bold, Soft
Main 컬러가 변경되면 실시간으로 생성
팔레트를 클릭하면 즉각 적용
폰트 시스템
한글/영문 폰트 지원
실시간 폰트 프리뷰
팔레트 저장/관리
최근 사용 팔레트를 사용자별 로컬 스토리지에 저장, 4개까지 화면에 표시
클립보드 복사 기능: 컬러 코드 및 폰트 정보 포함
반응형 미리보기
실시간 변경 사항 반영
모바일/데스크톱 호환
화면 구성 요소가 변경될 때 부드러운 애니메이션 효과 적용
2.2 기술 스택 ⚙️
Apps Script: Code.gs(메인 스크립트)+index.html(클라이언트 사이드 코드)
서버리스 환경에서 빠르게 배포
Google Workspace와 원활한 통합
API 호출 및 데이터 처리가 용이
React + TailwindCSS
컴포넌트 기반으로 UI를 빠르게 개발
TailwindCSS를 활용하여 직관적이고 효율적인 스타일
사용자와의 상호작용을 처리하고 실시간 색상 및 폰트 시각화를 제공
Claude API
AI 기반 색상 팔레트 추천 시스템을 위해 연동
사용자가 선택한 Main 색상에 어울리는 색상 조합을 추천
Local Storage
팔레트를 선택하여 사용자의 로컬 스토리지(브라우저)에 저장
팔레트를 클릭하면 저장한 팔레트 재적용
2.3 팔레트 시스템 🎨
팔레트 유형 설계
Simple: 한 가지 색상의 명도를 조정하는 팔레트
Calm: 세련되고 차분한 색상 조합을 위한 팔레트
Soft: 부드러운 파스텔 톤 색상 팔레트
Bold: 비비드하고 강렬한 색상 조합을 위한 팔레트
AI 기반 팔레트 생성 로직
사용자가 Main 색상을 선택
Claude API를 활용하여 Main 색상에 맞춰 4가지 유형의 추천 팔레트를 생성
웹 디자인에 적합한 색상 대비와 가독성을 유지
팔레트 생성을 위한 프롬프트(Code.gs에 포함)
3. AI 코딩을 통한 앱 제작 🤖
앱 제작 아이디어를 Claude와 브레인스토밍하며 구체화하고 정리
Claude의 아티팩트를 활용하여 시각적 프로토타이핑을 진행, UI/UX 설계
Apps Script를 통한 웹앱 제작임을 알리고 Claude를 이용해 코딩 진행
프로그램이 길어지면서 Claude에서는 색상 팔레트 추천 시스템을 만들고, ChatGPT에서는 폰트 셀렉터를 만드는 등 분담하여 제작하고 추후 조합
각 AI가 상대의 작업 결과에 피드백을 하게 하는 등 AI 도구를 상호 보완적으로 활용
4. 성과 및 한계 ⭐
구현 성과
AI 기반 실시간 색상 및 폰트 시각화 도구를 성공적으로 구현
Apps Script를 활용하여 빠르게 배포할 수 있는 웹앱을 제작
색상 추천, 폰트 선택, 반응형 디자인을 통해 사용자에게 직관적이고 효율적인 디자인 도구를 제공
기술적 한계
AI 추천 시스템의 정확도와 일관성 향상 필요
API 호출 최적화와 응답 속도 개선 필요
Apps Script의 실행 시간과 할당량 제한 으로 인한 웹앱의 확장성 제약
5. 향후 계획 🚀
ColorHunt 등 색상 정보 제공 사이트의 데이터베이스를 통합하여 정교하고 빠른 색상 추천(API를 제공하지 않으므로 웹스크래핑으로 데이터베이스 작성하여 활용)
Like 기능을 추가하고, 인기 팔레트와 색상 정보를 구글 시트에 저장 및 분석하여 통계 제공
사용자 맞춤형 팔레트의 공유 기능
AI 응답 최적화와 웹앱의 성능 개선
구현이 어려웠던 기능들을 Cursor AI 등 코딩 전문 AI 도구를 활용하여 제작 시도
6. 인사이트 ✨
AI 도구 활용 방법
기존에는 Claude 위주로 코딩하였으나, 프로젝트가 길어지며 ChatGPT도 함께 활용
대화가 길어져서 새 대화창을 열고 앱 제작 파일을 제공하면, 마치 새로운 전문가와 상담하는 듯한 신선한 관점 제공
원하는 디자인이 있거나 기존 디자인을 수정할 때는 이미지를 제공하고 함께 보며 대화하는 것이 편리함.
AI 도구 간 교차 검증(Claude, ChatGPT, Gemini, Deepseek 시도)으로 더 나은 해결책 도출, Cursor AI를 사용해보지 않은 것이 아쉬움.
프로토타입 제작과 피드백의 순환을 통한 지속적 개선 가능
Apps Script의 장단점
서버리스 아키텍처의 강점: 빠른 재배포, AI 통합 용이
빠른 프로토타이핑으로 개발 속도 향상
AI API 연결 속도 지연, 동시 처리 요청 구조의 제약 등 한계점도 확인
웹 사이트를 개발한 경험이 있다면 하나의 HTML 파일 안에 스타일과 스크립트를 모두 작성하는 방식이 불편할 수 있 음.
사용자 중심 설계
시각적 반응형 웹앱이라는 초기 목표 달성
같은 기능이라도 디자인이 좋은 것이 선택된다는 경험 재확인
직관적 UI/UX의 가치와 사용자 직접 경험의 중요성 체감
성능과 사용자 경험 사이의 균형점 발견 필요성 인식
지속적인 수정과 보완을 통한 완성도 향상 필요
업데이트(25/2/10)
밝은 배경에서도 글자가 보이도록 자동 글자색 변경 기능 추가
문제 상황(스터디 발표시 묘묘랑님 피드백 👍)
배경색을 사용자가 자유롭게 변경
메뉴와 라벨 글자가 White 색상으로 고정되어 밝은 배경색에서 보이지 않음.
해결
스타일에서 동적 글자색 지정
변화하는 배경색의 밝기를 계산하고, 그에 따라 동적 글자색 적용