혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch2

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라  클로드 AI(Claude AI)로 따라해본 결과입니다.

구글 대신 네이버로? 나만의 취향이 담긴 시작 페이지 리디자인!

클로드를 이용해 나만의 시작 페이지를 만드는 여정입니다. 책에서는 구글 스타일로 적용하라고 권했지만, 저는 좀 더 친숙한 '네이버 스타일'로 바꿔보고 싶었어요. 그래서 클로드에게 대뜸 네이버 스타일로 디자인을 수정해주세요라고 요청했습니다. "설마 이것까지 될까?" 했는데, 정말 놀랍게도 클로드가 제 의도를 정확히 파악하더라고요!

클로드는 친절하게도 네이버 스타일로 어떤 부분이 바뀌는지 상세하게 설명해줬습니다. GNB 스타일, 상단 메뉴, 로고, 검색창, 섹션 레이아웃, 그리고 배경색까지 (#F5F5F5) 말이죠. (스크린샷 4 참고) 설명을 듣는 순간, "오~ 이 녀석 제법인데?" 하는 감탄사가 절로 나왔습니다.

그리고 잠시 후, 제 눈앞에 펼쳐진 아티팩트는 정말 네이버 초기 화면을 연상케 하는 모습으로 변신해 있었습니다. 와우! 생각보다 참 쉽죠잉!? 이래서 AI 활용이 재미있나 봅니다. 이렇게 저만의 취향을 반영한 페이지가 순식간에 만들어지는 걸 보니, AI와 함께라면 뭐든지 가능할 것 같은 느낌이 드네요!

아! 그리고 주의할 점은 토큰 사용량입니다. 책에 있는 내용을 몇 번 따라했을 때 토큰이 이 만큼 사용된다는 점도 참고해주세요.

 

추가!

처음 클로드가 만들어준 아티팩트에 `날씨 정보를 불러올 수 없습니다` 같은 메시지가 떴는데, 수정 작업에 들어갔어요. 몇 번의 시행착오 끝에 클로드에게 특정 데이터를 불러오는 부분을 개선하도록 요청했고, 결과적으로 `오늘의 날씨`와 `오늘의 주요 뉴스` 관련 오류를 깔끔하게 해결할 수 있었습니다. 약간 헤매긴 했지만 결국엔 됩니다.!