Cursor보다 더 나에게 맞는 방법을 찾아보던 중 Claude에 대한 내용을 얼핏 들었다.
이번 블로그에서는 Claude를 통해 웹페이지 코드 구현을 해보려한다.

Claude란

• Claude(클로드)는 Anthropic(앤트로픽)이라는 미국 AI 스타트업이 개발한 대화형 인공지능 서비스. 쉽게 말하면, ChatGPT랑 비슷한 AI 챗봇이라고 생각

• 특징

  • 장문 처리 능력 끝내줌.
  • 논문이나 보고서 같은 긴 글 통째로 넣어도 전체 맥락 파악해서 한 번에 요약하거나 핵심 내용 뽑아줌.
  • 안전성과 윤리성에 집착하는 회사에서 만든 AI라 실수 거의 없고, 위험한 답변 안 내놓게 설계함.
  • 이미지(사진, 표, 차트 등) 첨부하면 그 내용 분석해서 설명도 해줌. 스크린샷, 차트 이미지 등 넣으면 바로 분석 가능함.
  • 최신 버전(Claude 3)
    • Opus, Sonnet, Haiku 세 가지 모델 있음. Opus가 제일 성능 높음. Haiku는 속도 빠르고 가벼움.

• 정리된 내용은 아래의 표 참고

  항목	내용
  개발사	Anthropic (앤트로픽)
  모델명	Claude (1, 2, 3)
  최신버전	Claude 3 (Opus, Sonnet, Haiku)
  출시연도	2023~2024
  주요특징	장문 처리, 맥락 이해, 안전/윤리 중시, 이미지 입력 가능(3부터)
  지원언어	영어 중심, 한국어 등 다국어 지원 확대
  입력길이	Opus 기준 200K tokens (GPT-4o보다 김)
  웹사이트	claude.ai
  API	기업/개발자용, 유료(버전별 차등)
  경쟁서비스	ChatGPT, Gemini, Perplexity 등

실제 구현

어떻게 활용을 해야할지에 대해서 고민이 많았다. 사진을 넣을지, 플러그인을 활용해서 뽑아볼지, 아니면 링크를 따서 클로드를 사용해볼지. 이번 구현은 클로드가 이미지를 인식하는 능력이 뛰어나다해서 피그마를 통해 png파일을 빼와 vs코드의 라이브서버를 통해 화면을 띄워보았다.

클로드가 그려줌

커서로 했을 때 보다는 낫다는 느낌을 받았다. 세부적인 내용들을 만져줘야하지만 몇초만에 AI가 이정도로 구현을 할 수 있다는 사실이 다시 한번 충격적이었다. 분명 html과 css파일을 나눠서 달라고했는데 같이 준건 좀 그랬으나(gpt를 통해서 분리했다), 내가 적었으면 지금 블로그를 적고있는 이 시간에도 절반도 완성 못했을거다. 클로드 최고!

파일을 나눈 뒤 모든 코드의 주석을 확인하며 전체적인 흐름을 파악했고 세부적으로 위치조정을 했다.

내가 수정함

디자인이 완벽하게 맘에 들지는 않지만 코드를 하나하나 뜯어가며 수정을 했다. 공모전팀에게 보여주고 어떤 툴을 가지고 코드구현을 할지에 대해서 토론해봐야겠다. 프론트엔드에 대한 이해도가 조금이라도 높아진것같다. 다들 역시 고생이 많다.

추후 여기서 배운 프론트 엔드 구현법을 가지고 내 개인프로젝트(버거코치)에도 적용해 볼 예정이다.

같은 과정 교육생님이 해주신 거

이거를 보면서 많은 생각이 들었다.
같은 클로드를 사용했고... 뭐 물론 무료와 유료의 차이가 있겠지만 AI를 활용하는방법에 대해서 많은 생각을 하게되었다.
주문을 구체적으로 넣는방법? 약간 서브웨이같은 느낌인가??
지금까지 나는 그냥 키오스크에서 딸깍해서 음식을 주문하는 느낌이었다면 교육생분이 적으신 내용은 진짜 빵부터 소스고르고 결제까지 하는 느낌이었다. 또한 그만큼 AI툴이 훈련된 것이 느껴졌다.
아 진짜 너무 신기하네 뭐지 이거
나도 AI활용법에 대해서 더욱 공부할 필요성을 느꼈다.