나의 온라인 식물장 My Plants Rooted at Home My Plants Rooted at Home
작년 8월에 천리향과 뱅갈고무나무를 데려온 것을 시작으로, 어느새 우리집에 식물이 7그루가 됐다. 오늘 애니시다를 한 그루 사면서, 식물을 잘 관리할 수 있고 나의 식물들을 보여줄 수 있는 온라인 식물장을 만들고 싶었다! 그 생각을 한 후 바로 시작해서, Claude Code와 함께 1시간 만에 온라인 식물장을 완성했다.
시작: 사진 14장과 한 줄 프롬프트
집에 있는 식물들을 거실 의자에 놓아두고 한 장 한 장 찍은 후, 아이폰으로 누끼를 따서 img 폴더에 식물 7종의 정면/상단 사진 14장을 넣고 시작했다.
지금 내가 img 폴더에 내가 키우는 식물들의 정면 샷과 상단 샷을 넣어놨어. 이거 가지고 사이트를 하나 만들어볼건데. 들여온 날부터 정리해보고, 내가 식물가게에서 들은 이야기 얘기하고, 네가 정보도 더 찾아서 만들어보자
Claude Code가 사진을 전부 열어보고 식물을 파악한 뒤, 나에게 들여온 날짜와 식물가게에서 들은 관리 팁을 물어봤다. 그 후 에이전트가 각 식물의 학명, 특성, 관리법에 대해 웹 리서치 7건을 동시에 돌려 수집했다.
컨셉 전환: 타임라인에서 식물장으로
처음에는 다크 테마 + 타임라인 레이아웃으로 만들었다. 내가 원하는 느낌이 아니었다. 내가 원하는 건 단순한 식물 도감이 아니라, 온라인 식물장이었다. 프롬프트를 다시 썼다.
내가 하고 싶은 거는 약간 식물장에 있는 것처럼 얘네들을 일자로 가로 스크롤 되게 쭈루룩 놓아지게 하고 그거 누르면 카드 정보가 나오게 하는 거야
그래서 전면 재설계. 아이보리 배경 위에 투명 PNG 식물들이 선반에 올라가 있고, 드래그로 옆으로 밀면서 구경하고, 클릭하면 모달로 상세 정보가 뜨는 구조로 바꿨다.
만들면서 깎은 것들
제목은 여러 후보 중 고민하다 “My Plants Rooted at Home”으로 정했다. 분갈이한 식물들이 새 화분에서 뿌리내리듯이, 나도 이 집에 조금씩 뿌리내리고 있다는 느낌을 주고 싶었다.
그 다음에는 식물 별 사이즈 조정에 신경썼다. 화분의 크기가 다 다른 것을 표현하고 싶었다. 나비란과 아이비는 작은 화분이라 크기를 줄여서 변주를 줬다.
처음에는 이미지는 PNG 14장이 총 79MB여서 모바일에서 로딩이 너무 느렸다. 모바일에서 너무 느리게 나온다고 했더니 WebP로 변환하자고 제안해주었고, 변환 후 8MB로 90% 줄었다. 모바일에서 로딩이 눈에 띄게 빨라졌다.
가드너 가이드: 키우는 사람을 위한 페이지
식물장을 예쁘게 완성하고 나니, 나를 위해 식물 관리할 때 참고할 페이지도 있으면 좋을 것 같았다. 물을 언제 줘야 하는지, 어디에 놓아야 하는지 한눈에 보고 싶었다.
그래서 Gardener’s Guide를 별도 페이지로 만들었다. 핵심은 햇빛량 기준 그룹핑
- 양지 (남향 창가, 베란다): 뱅갈고무나무, 아이비, 애니시다
- 반양지 (창가에서 1~2m, 커튼 너머): 천리향, 뷰티그린
- 반음지 (실내 안쪽, 북향): 스킨답서스, 나비란
물 주는 것은 겉흙을 만져보고 직접 판단하는 게 가장 정확하기 때문에 “언제 물 줘라”보다는 특성을 비교해서 보여주는 방식을 택했고, 여기에 월별 타임라인(개화기, 비료 시기, 가지치기)도 넣었다.
타임라인
| 시간 | 내용 |
|---|---|
| 14:30 | 사진 14장 + 프롬프트 하나로 시작 |
| 14:40 | 식물 정보 입력, 웹 리서치 7건 동시 진행 |
| 14:50 | 첫 버전 → 컨셉 변경 (식물장 가로 스크롤) |
| 15:05 | 제목 확정, 사이즈 조정, 꽃 표시 추가 |
| 15:13 | 첫 배포 |
| 15:21 | 이미지 최적화 (PNG → WebP, 79MB → 8MB) |
| 15:30 | 메타 태그, 파비콘 추가 → 완성 |
| 16:50 | 가드너 가이드 페이지 추가 배포 |
식물을 하나씩 기르기 시작하면서, 이 집에 대한 애정도 조금씩 자라난 것 같다. 가게에서 사온 식물을 새 화분에 담아 분갈이 하고나면, 처음에는 새 집에 적응하느라 애를 쓰곤 하지만, 적응하고 나면 흙 속에 뿌리를 내리고 잎을 키워낸다. 나도 비슷한 것 같기도 하고. 어느새 초록으로 채워지고 있는 따뜻한 집을 바라보며, 올해 식목일을 보내봐야겠다는 생각이 든다. 진짜 식물들도, 온라인 식물장도 잘 가꾸어 봐야지!