앱스 스크립트로 제작한 AI 기반 컬러 & 폰트 시각화 웹앱

1. 앱 개요

(옵린이로서) Obsidian에서 헤딩 스타일링을 하며 불편함을 경험
Canva를 사용한 디자인 작업에서도 동일한 문제가 발생
색상과 폰트를 실시간으로 조합하고 확인하는 도구의 필요성 인식
기존 도구들은 색상과 폰트를 각각 적용 및 확인하고, 선택에서 전문적인 지식이 필요한 경우 있음.
AI가 색상을 추천하고, 사용자가 폰트와 함께 실시간으로 시각화할 수 있는 웹앱을 Google Apps Script로 제작하고 배포할 것을 구상

실시간 색상 시각화
- 4가지 기본 컬러 선택기 제공: Main(주요 헤딩), Sub(보조 헤딩), Point(강조), Base(기본)
- 배경색: 실시간 변경, 웨이브 애니메이션 적용
AI 팔레트 추천
- 4가지 팔레트 타입 제공: Calm, Simple, Bold, Soft
- Main 컬러가 변경되면 실시간으로 생성
- 팔레트를 클릭하면 즉각 적용
폰트 시스템
- 한글/영문 폰트 지원
- 실시간 폰트 프리뷰
팔레트 저장/관리
- 최근 사용 팔레트를 사용자별 로컬 스토리지에 저장, 4개까지 화면에 표시
- 클립보드 복사 기능: 컬러 코드 및 폰트 정보 포함
반응형 미리보기
- 실시간 변경 사항 반영
- 모바일/데스크톱 호환
- 화면 구성 요소가 변경될 때 부드러운 애니메이션 효과 적용

Apps Script: Code.gs(메인 스크립트)+index.html(클라이언트 사이드 코드)
- 서버리스 환경에서 빠르게 배포
- Google Workspace와 원활한 통합
- API 호출 및 데이터 처리가 용이
React + TailwindCSS
- 컴포넌트 기반으로 UI를 빠르게 개발
- TailwindCSS를 활용하여 직관적이고 효율적인 스타일
- 사용자와의 상호작용을 처리하고 실시간 색상 및 폰트 시각화를 제공
Claude API
- AI 기반 색상 팔레트 추천 시스템을 위해 연동
- 사용자가 선택한 Main 색상에 어울리는 색상 조합을 추천
Local Storage
- 팔레트를 선택하여 사용자의 로컬 스토리지(브라우저)에 저장
- 팔레트를 클릭하면 저장한 팔레트 재적용

팔레트 유형 설계
- Simple: 한 가지 색상의 명도를 조정하는 팔레트
- Calm: 세련되고 차분한 색상 조합을 위한 팔레트
- Soft: 부드러운 파스텔 톤 색상 팔레트
- Bold: 비비드하고 강렬한 색상 조합을 위한 팔레트
AI 기반 팔레트 생성 로직
- 사용자가 Main 색상을 선택
- Claude API를 활용하여 Main 색상에 맞춰 4가지 유형의 추천 팔레트를 생성
- 웹 디자인에 적합한 색상 대비와 가독성을 유지

Apps Script를 통한 웹앱 제작임을 알리고 Claude를 이용해 코딩 진행
프로그램이 길어지면서 Claude에서는 색상 팔레트 추천 시스템을 만들고, ChatGPT에서는 폰트 셀렉터를 만드는 등 분담하여 제작하고 추후 조합
각 AI가 상대의 작업 결과에 피드백을 하게 하는 등 AI 도구를 상호 보완적으로 활용

구현 성과
- AI 기반 실시간 색상 및 폰트 시각화 도구를 성공적으로 구현
- Apps Script를 활용하여 빠르게 배포할 수 있는 웹앱을 제작
- 색상 추천, 폰트 선택, 반응형 디자인을 통해 사용자에게 직관적이고 효율적인 디자인 도구를 제공

기술적 한계
- AI 추천 시스템의 정확도와 일관성 향상 필요
- API 호출 최적화와 응답 속도 개선 필요
- Apps Script의 실행 시간과 할당량 제한으로 인한 웹앱의 확장성 제약

ColorHunt 등 색상 정보 제공 사이트의 데이터베이스를 통합하여 정교하고 빠른 색상 추천(API를 제공하지 않으므로 웹스크래핑으로 데이터베이스 작성하여 활용)
Like 기능을 추가하고, 인기 팔레트와 색상 정보를 구글 시트에 저장 및 분석하여 통계 제공
사용자 맞춤형 팔레트의 공유 기능
AI 응답 최적화와 웹앱의 성능 개선
구현이 어려웠던 기능들을 Cursor AI 등 코딩 전문 AI 도구를 활용하여 제작 시도

AI 도구 활용 방법
- 기존에는 Claude 위주로 코딩하였으나, 프로젝트가 길어지며 ChatGPT도 함께 활용
- 대화가 길어져서 새 대화창을 열고 앱 제작 파일을 제공하면, 마치 새로운 전문가와 상담하는 듯한 신선한 관점 제공
- 원하는 디자인이 있거나 기존 디자인을 수정할 때는 이미지를 제공하고 함께 보며 대화하는 것이 편리함.
- AI 도구 간 교차 검증(Claude, ChatGPT, Gemini, Deepseek 시도)으로 더 나은 해결책 도출, Cursor AI를 사용해보지 않은 것이 아쉬움.
- 프로토타입 제작과 피드백의 순환을 통한 지속적 개선 가능
Apps Script의 장단점
- 서버리스 아키텍처의 강점: 빠른 재배포, AI 통합 용이
- 빠른 프로토타이핑으로 개발 속도 향상
- AI API 연결 속도 지연, 동시 처리 요청 구조의 제약 등 한계점도 확인
- 웹 사이트를 개발한 경험이 있다면 하나의 HTML 파일 안에 스타일과 스크립트를 모두 작성하는 방식이 불편할 수 있음.
사용자 중심 설계
- 시각적 반응형 웹앱이라는 초기 목표 달성
- 같은 기능이라도 디자인이 좋은 것이 선택된다는 경험 재확인
- 직관적 UI/UX의 가치와 사용자 직접 경험의 중요성 체감
- 성능과 사용자 경험 사이의 균형점 발견 필요성 인식
- 지속적인 수정과 보완을 통한 완성도 향상 필요

밝은 배경에서도 글자가 보이도록 자동 글자색 변경 기능 추가
문제 상황(스터디 발표시 묘묘랑님 피드백 👍)
- 배경색을 사용자가 자유롭게 변경
- 메뉴와 라벨 글자가 White 색상으로 고정되어 밝은 배경색에서 보이지 않음.
해결
- 스타일에서 동적 글자색 지정
- 변화하는 배경색의 밝기를 계산하고, 그에 따라 동적 글자색 적용