소개
시도하고자 했던 것과 그 이유
사실, 토요일은 출근해서 오프라인 참여 못하고,
오늘은 저희집 고양이가 아파서 병원에 다녀오느라 늦게 업로드 합니다 ㅠㅠ
고양이를 키우는 집사 입장에서,
뉴스·병원·건강 정보·나이별 정보가 각각 흩어져 있는 것이 불편하다고 느꼈습니다.
그래서
집사를 위한 고양이 통합 정보 웹사이트를 직접 만들어보고자 했습니다.
단순한 정보 나열이 아니라,
뉴스 확인
병원 찾기
건강 정보
나이별 관리
한 곳에서 볼 수 있는 대시보드 형태로 구현하는 것이 목표였습니다.
또한 개발 경험이 많지 않은 상태에서
AI 기반 코딩 도구(Claude Code + bkit)를 활용하여
실제 서비스 형태까지 구현해보는 것을 목표로 진행했습니다.
진행 방법
사용 도구
Claude Code (AI 코딩)
bkit (Vibecoding Kit)
VS Code
HTML / CSS / JavaScript
Vercel 배포
(추후 예정) Kakao Map API
작업 흐름
Claude Code 실행
bkit 플러그인 설치
자연어로 웹사이트 요구사항 입력
HTML / CSS / JS 자동 생성
VS Code에서 수정 및 디자인 개선
기능 보완 (뉴스 / 병원 / 탭 구조)
사용한 핵심 프롬프트
고양이 통합 정 보 대시보드 웹사이트를 만들고 싶어.
뉴스, 병원 찾기, 나이별 정보, 건강 상식 기능 포함해서 만들어줘.
초보자도 실행할 수 있게 만들어줘.
기능 개선 프롬프트
지금 사이트는 샘플 데이터 중심이라 실질적인 도움이 부족해.
요구사항:
1. 뉴스 탭:
- 카드 클릭 시 실제 기사 링크 열리게
- 제목, 요약, 출처, 날짜 포함
2. 병원 찾기:
- 지역별 필터 + 병원 정보 구조 개선
3. 나이별 정보:
- 생애 단계 + 특징 + 관리 팁 추가
4. 건강 상식:
- 카드 클릭 시 상세 내용 보이게
디자인은 유지하면서 실사용형 구조로 바꿔줘
디자인 수정
-> 초기 색상은 단순한 주황 계열이었으나
-> 감성적인 공간(카페/병원 느낌) 참고하여 컬러 변경
--main-yellow: #D99A2B;
--light-cream: #F5F1E8;
--dark-brown: #4A3427;
작업 화면
ㅎ
VS CODE 에서 터미널 열어서 작업했고,
처음에는 클로드 코드를 불러오지도 못해서 GPT와 함께 계속 대화하면서
차근차근 배우면서 한거 같아요.
웹에서 대화를 하며 쉽게 하는 방법도 있었지만,
한번은 터미널에서 해보고 싶어서 스터디에서 진행했던 대로 따라서 해보았습니다 :)
앞으로 험난한 길이 있겠지만... 열심히 해볼게요 :)
https://cat-web-roan.vercel.app/
vercel 배포해달라고 해서 사이트 받았습니다 :)
