## 소개 맥미니에 상주하는 제 개인 AI 참모장 '긍정이'가 있습니다. 텔레그램으로 대화하고, 크론으로 자동화 작업을 돌리고, 매일 자기 활동 현황을 **대시보드 HTML 한 장으로 자동 생성**해 줍니다. 대시보드에 담기는 내용은 이렇습니다. - 최근 7일 작업 세션 / 도구 사용 횟수 / 주고받은 메시지 / 연속 활동 기록 (KPI 4종) - 토큰 사용처 (최근 30일) — 텔레그램 대화 vs 자동화 작업 - 자주 쓴 도구 순위, 지금 돌아가는 자동화 4개, 보유 스킬 53개, 서브에이전트 조직도 기능은 이미 잘 돌아가고 있었습니다. 문제는 **화면이 밋밋했다는 것**입니다. 매일 열어보는 화면인데 정이 안 가더라고요. 그래서 데이터 로직은 하나도 건드리지 않고 화면(HTML/CSS)만 통째로 갈아끼우는 작업을 AI와 함께 진행했습니다.
개인의 통계를 보여주는 한국 앱의 스크린샷
▲ 작업 전 — 기본 블루 테마. 기능은 다 있지만 심심합니다.
## 시도하고자 했던 것과 그 이유
저만 보는 대시보드이지만, 봇이 뚝딱 만들어준 대시보드는 너무나 성의없는 AI 티가 나서 이왕이면, 제 봇의 아이덴티티를 살리고, 한번을 봐도 기분좋게 바꾸면 좋겠다. 제 봇의 이름을 표현하는 생기있고 싱그러운 룩앤필을 가지면 좋겠다, 생각했어요.
▲ 시안 A — 민트를 시도했는데. 클로드 디자인이 헤더에만 적용을 하고, 다른 바탕과 카드들은 맹맹했어요
한국 앱 스크린샷
▲ 시안 B — 원색적인 보색조합으로 만들면 어떨까 해서, 이미지를 하나 던져줬습니다. 색을 문장으로 설명하는 것은 힘들고 색상값을 제가 알아내는 것도 귀찮아서, **원하는 색을 그냥 이미지로
주황색이 표시된 한국 앱의 스크린샷
여성 이미지가 포함된 한국 앱의 스크린샷
### 거의 컬러 적용은 정리가 되어 갔지만, 뭔가 심심했습니다. 그래서 배경을 싱그러운 식물 잎을 깔면 어떨까 생각해서 핀터레스트에서 퀵하게 찾은 다음 이미지들을 주면서 요청했어요
한국 야자수 벽지- 스크린샷
▲ 식물 배경 후보 5종 — 밝은 라임, 역광, 딥그린 바나나잎 등 최종 선택은 **오른쪽 가운데의 딥그린 바나나잎**. 클로드가 추천해준 딥그린 바나나잎으로 했고, 고른 이유가 취향이 아니라 기능이었습니다. - 톤이 **어둡고 균일해서** 위에 얹는 다크그린 패널과 흰 글씨가 묻히지 않습니다.
### 붙여넣은 사진은 못 쓴다 → 채팅에 붙여넣은 사진은 AI가 파일로 쓸 수 없어서 같은 느낌으로 새로 생성해야만 했고, 클로드가 MCP로 연결한 힉스필드를 통해 나노바나나로 잎 이미지를 만들어줬습니다.
어두운 열대 바나나 야자나 무 잎이 프레임에 있고 풍부한 에메랄드 그린 잎사귀 스크린샷
▲ 새로 생성한 딥그린 바나나잎 배경이고, 다음은 완성된 대시보드입니다
여러 사람이 있는 녹색 화면
확정 디자인을 실제 생성기 코드에 이식 시안이 확정된 뒤, 맥미니에서 매일 돌아가는 **실제 파이썬 생성기 파일**에 디자인을 이식했습니다. - 데이터 수집·분석 로직: **손대지 않음** - 화면 출력부(HTML/CSS): 새 디자인으로 전면 교체 - 아바타 이미지 + 잎 배경 이미지: **파일 안에 내장** 이미지를 외부 파일로 두면 경로가 깨지거나 파일을 같이 옮겨야 합니다. 아예 스크립트 안에 박아 넣어서 **.py 파일 하나만 있으면 되는 구조**로 만들었습니다. (그래서 파일 용량이 402KB가 됐습니다.)
배포는 봇에게 시켰습니다. " 긍정아, 대시보드 생성기를 이 새 파일로 교체해줘. 지금 쓰는 생 성기 스크립트를 이걸로 덮어쓰고, 매일 자동 갱신도 이 파일로 돌아가게 해줘. ``` 라고 해서 마무리되었지만, "지금은 무거운 배경 이미지가 파일 속에 통째로 박혀있어서 제 브라우저가 버거워해요. 이걸 따로 빼서 가볍게 최적화한 뒤 웹에 올려두고 불러오는 방식으로 바꿀게요" ---> 무거운 이미지를 파일에서 빼내서 → 압축 → 웹에 따로 올리고 → 주소로 불러오게 수정했고, 다음과 같은 피드백이 와서, 기분이 좋았습니다
" 와, 봤어요 🥹💚 이번엔 제 화면에서도 바나나잎 초록 배경이 쫙 떴어요! 상단 헤더랑 카드 뒤로 싱그러운 식물잎이 선명하게 깔려있고, 제 아바타(엄지척!)도 왼쪽 위에 또렷하게 잘 떠요. 진짜 예뻐요"
## 결과와 배운 점 ### 좋았던 점 - **디자인만 갈아끼우는 데 성공했습니다.** 데이터 로직을 안 건드렸기 때문에 리스크가 거의 없었습니다. - **색 스와치 방식으로 소통 비용이 확 줄었습니다.** 말로 서너 번 주고받을 걸 이미지 한 장으로 끝냈습니다. - **단일 파일 자립 구조** 덕분에 배포가 "파일 하나 넘기기"로 끝났습니다.
- AI 티 나던 성의 없는 대시보드가 잎 배경 + 다크그린 패널 + 블루그레이 포인트 조합으로 아이덴티티를 조금은 찾게 되었어요
### 시행착오 / 아쉬운 점 - **채팅에 붙인 사진은 AI가 직접 쓰지 못합니다.** 정확히 그 사진을 쓰려면 파일로 따로 전달해야 합니다. 그리고, 무거운 이미지가 그대로 박혀있는 사이트를 재조정해서 파일을 빼낸 후 압축시켜서 웹에 따로 올리면 훨씬 가벼운 사이트로 만들 수 있다고 합니다.
### 배운 점 (꿀팁) - **색은 형용사 대신 이미지로 주세요.** 원하는 색을 채운 사각형 한 장이 "차분한 청록빛 회색"보다 백 배 정확합니다.
