Ts_skin_maker_03_implement

trouble_shooting

글이 전혀 표시되지 않는 문제

• 글이 전혀 표시되지 않는 문제가 있었고, 클로드 코드는 계속 엉뚱한 부분을 수정함.
• 디버깅을 위한 화면 공간을 추가해 달라 했고 해당 화면을 기준으로 오류를 수정하려고 함
• 최종적으로는 reference 보고 글이 표시되지 않는 문제를 확인해달라 프롬프트를 넣자 금방 해결 됨

사이드바 간격 수정

• 사이드바 하위 카테고리와 | 간격이 마음에 들지 않아 간격을 수정하려고 했으나 의외로 수정이 쉽지 않았음.

• 저 간격 수정을 위해 많은 시도를 했으나 명확하게 원인을 찾지 못하고 수정하지 못함
• 개인적으로 저 사이드 바 옆 | 표기가 예쁘다고 생각하지만 > 화살표와 | 간격과 카테고리 간격 조절이 원할하지 않아 결국 전부 제거함.

위치 수정, 크기 변경, 색상 변경

• 위치 수정, 크기나 색상 변경은 매우 쉽게 잘 먹혀 들어감.
• F12를 눌러 개발자도구를 열거나 CURSOR AI의 브라우저 도구에서 select element 를 활용하면 수정해야 하는 명확한 위치를 줄 수 있어 어렵지 않게 작업됨

버전관리

• html, css 에 대한 지식이 겉핥기 수준만 있었기에 시행 착오가 참 많았음.
• 클로드 코드가 말을 개떡 같이 알아먹고 수정하는 경우도 있었고, 내가 개떡같이 요청한 경우도 있었음.
• 관련 지식이 있었으면 좀 더 쉬웠겠다 생각은 듬.
• 몇 번 실패 후 여러가지 방법을 시도해봄. 수정마다 troubleshooting.md 파일을 만들어 해당 이력을 기록하게 한다거니 세션노트를 만들어 완료 작업들을 기록하기도 함.
• 가장 효과적이였던 것은 claude.md 파일에 아래 지침을 추가하여 모든 수정사항에 대한 버전관리를 하는 것

  자동 버전 관리 필수 - src/ 폴더의 파일을 수정할 때마다 반드시 새 버전 폴더(X.XX) 생성. 사용자가 시키지 않아도 자동으로 버전업해야 함. 롤백 기점 확보가 목적.  

• 버전관리 이후 작업이 훨씬 편해짐. 작업에 대한 요청을 세세하게 쪼개서 claude 코드가 잘 이해한 작업과 이해 못한 작업을 구분하고 하나씩 해결된 버전을 추가하면서 여기엔 작성되지 않았던 tag 미표기, 댓글창 미표기 등의 크리티컬한 에러들이 생각보다 쉽게 해결됨.