r/GeminiAI•1일 전•4•2
컴포넌트의 은밀한 사생활: 등대 그림
the secret life of components: the lighthouse painting
핵심 요약
등대 사진에서 영감을 받아 AI 도구들을 활용해 낮과 밤이 전환되는 인터랙티브 컴포넌트를 제작한 과정입니다.
- AI 도구 활용 — Grok, Gemini, Google Flash를 조합해 컴포넌트 시각화 및 로직 구현
- 레이아웃 문제 해결 — 초기 배포 시 발생한 구조적 결함을 수정하여 완성도 확보
- 인터랙티브 기능 — 줄을 당겨 낮과 밤을 전환하는 등대 컴포넌트 구현
가끔은 영감이 어디서 어떻게 튀어나올지 도무지 알 수가 없다니까...
그냥 즉흥적으로 떠난 여행이 등대 사진 한 장이랑 대충 그린 스케치로 이어지더니, 결국 낮/밤 토글 기능까지 발전해버림. 심지어 당기면 작동하는 줄까지 달았는데(솔직히 이게 어디서 튀어나온 아이디어인지 나도 모르겠음).
첫 작업은 Grok으로 돌리고, 비주얼이랑 상호작용 다듬는 건 Gemini Argon을 썼어. 마지막으로 Google Flash 3.8(어허, 아직도 쓸만함)로 검수하고 배포까지 끝냈지.
근데 문제는 배포하고 나니까 페이지에 제대로 안 맞는 거임. 등대는 살아남았는데, 레이아웃 꼬라지가 나사 세 개 남겨두고 조립한 이케아 옷장 수준이더라고.
레이아웃 몇 번 수정하고 나니까, 이제야 그냥 눈으로 보는 게 아니라 진짜 가지고 놀 수 있는 스케치가 됐네.
줄을 당기면 낮과 밤이 바뀌는 등대 작동 버전은 여기 있음.
https://forevercomponents.com/components/inputs-switches/lantern-pull/
