Skip to main content

프롬프트해커 대니의 최신 소식 구독하기!

클로드 3.5 소넷과 아티펙트 기능으로 3분만에 AI 웹서비스 만들기

안녕하세요! 오늘은 GPT4o 보다 뛰어나다고 평가 받는 Anthropic의 최신 AI 모델인 클로드 3.5 소넷과 클로드 아티팩트 기능을 이용해 단 3분 만에 AI 웹서비스를 만드는 방법을 알아보겠습니다. 비전공자 분들도 쉽게 따라할 수 있도록 자세히 설명드리겠습니다.

만들어볼 AI 웹서비스 소개​

우리가 만들 웹서비스는 사용자가 입력한 주제에 대해 영어로 재미있는 이야기를 생성해주는 애플리케이션입니다. 예를 들어 "우주를 여행하는 고양이"라는 주제를 입력하면, 그에 맞는 영어 이야기를 AI가 만들어줍니다.

클로드 3.5 소넷과 아티펙트 기능으로 3분만에 AI 웹서비스 개발을 위한 준비물​

  1. 컴퓨터: Windows, Mac, 또는 Linux 컴퓨터
  2. 인터넷 연결: 안정적인 인터넷 연결이 필요합니다.
  3. Python:
    • 설치 방법: Python 공식 웹사이트에서 최신 버전을 다운로드하고 설치합니다.
    • 설치 확인: 명령 프롬프트(윈도우) 또는 터미널(Mac/Linux)에서 python --version 명령어를 입력하여 설치된 Python 버전을 확인합니다.
  4. 텍스트 에디터:
    • 추천: Visual Studio Code (무료)
    • 설치 방법: 공식 웹사이트에서 다운로드하고 설치합니다.
  5. Anthropic API 키:
    • 발급 방법: Anthropic 웹사이트에 가입하고 API 키를 발급받습니다.
    • 주의: API 키는 비밀번호처럼 안전하게 보관해야 합니다.

클로드 API 키를 발급 받는 방법이 궁금하다면 클로드 API 발급 방법을 참고하세요.

단계별 가이드​

1. 아티팩트 기능 활성화하기​

  1. Claude AI 웹사이트에 접속하여 로그인합니다.
  2. 화면 오른쪽 상단의 프로필 아이콘을 클릭합니다.
  3. 메뉴에서 'Feature Preview'를 선택합니다.

클로드 Feature preview

  1. 'Artifacts' 옵션을 찾아 스위치를 'On' 위치로 변경합니다.

클로드 아티팩트 (Claude Artifacts) 옵션

이제 아티팩트 기능을 사용할 수 있습니다!

2. 클로드에게 코드 생성 요청하기​

  1. Claude AI 채팅창에 다음 내용을 복사하여 붙여넣습니다:

클로드 AI 웹서비스 코드 생성 요청 프롬프트

  1. 엔터를 눌러 메시지를 전송합니다.
  2. 클로드가 생성한 코드와 설명을 확인합니다.

클로드 AI 웹서비스 코드 생성 결과

3. 코드 저장하기​

  1. 텍스트 에디터(예: Visual Studio Code)를 엽니다.
  2. 새 파일을 만들고 이름을 app.py로 지정합니다.
  3. 클로드가 생성한 코드를 복사하여 app.py 파일에 붙여넣습니다.
  4. 파일을 저장합니다.

4. 필요한 라이브러리 설치하기​

  1. 명령 프롬프트(윈도우) 또는 터미널(Mac/Linux)을 엽니다.
  2. 다음 명령어를 입력하여 필요한 라이브러리를 설치합니다:
pip install streamlit anthropic
  1. 설치가 완료될 때까지 기다립니다.

5. Anthropic API 키 설정하기​

  1. app.py 파일을 텍스트 에디터에서 엽니다.
  2. os.environ["ANTHROPIC_API_KEY"] = "YOUR_API_KEY" 부분을 찾습니다.
  3. "YOUR_API_KEY" 부분을 여러분이 발급받은 실제 API 키로 교체합니다.
  4. 파일을 저장합니다.

6. 웹서비스 실행하기​

  1. 명령 프롬프트 또는 터미널에서 app.py 파일이 있는 디렉토리로 이동합니다.
    • 윈도우: cd C:\경로\app.py가_있는_폴더
    • Mac/Linux: cd /경로/app.py가_있는_폴더
  2. 다음 명령어를 입력하여 웹서비스를 실행합니다:
streamlit run app.py
  1. 웹 브라우저가 자동으로 열리며 여러분의 AI 웹서비스가 표시됩니다!

클로드 아티팩트 (Claude Artifacts) 웹서비스 실행 화면

7. 웹서비스 사용하기​

  1. 텍스트 입력창에 원하는 이야기 주제를 입력합니다. (예: "우주를 여행하는 고양이")
  2. "Generate Story" 버튼을 클릭합니다.
  3. AI가 생성한 영어 이야기가 화면에 표시됩니다.

클로드 아티팩트 (Claude Artifacts) 예시 결과 축하합니다! 여러분은 방금 자신만의 AI 웹서비스를 만들었습니다. 이제 다양한 주제로 재미있는 영어 이야기를 만들어보세요.

AI 웹서비스 개선하기​

이제 여러분은 AI 웹서비스를 만들었습니다! 원하는 대로 커스터마이징하여 더욱 흥미로운 서비스로 발전시켜보세요. 예를 들어, 사용자 입력을 받는 방식을 변경하거나 프롬프트 작성을 통해 전체 적인 성능을 올릴 수 있습니다.

아래는 프롬프트 개선을 통해 보다 나은 결과를 얻을 수 있는 예시입니다:

클로드 아티팩트 (Claude Artifacts) 프롬프트 개선 예시

무엇보다 여러분만의 창의적인 아이디어로 AI 웹서비스를 더욱 발전시켜보세요!

클로드 아티펙트 (Claude Artifects) 를 활용해서 3분만에 영어 이야기 생성기 AI 웹서비스 만들기​

Anthropic의 최신 AI 모델인 클로드 3.5 소넷과 함께 출시된 아티펙트 기능을 이용해 3분 만에 AI 웹서비스를 만드는 방법을 알아보겠습니다. 아래 Youtube 영상은 아티펙트 기능을 이용해 3분 만에 영어 이야기 생성기 AI 웹서비스를 만드는 방법을 보여줍니다.

클로드 아티펙트 (Artifects)로 3분만에 AI 웹서비스 만들기

(마이크가 없어 소리가 잘 안들리는 점 미리 양해 부탁 드립니다. ㅠㅠ )

결론​

클로드 아티팩트는 AI와의 협업 방식을 획기적으로 변화시킬 잠재력을 가진 혁신적인 기능입니다. 코드 작성, 문서 작업, 디자인 등 다양한 분야에서 AI의 지원을 받아 생산성을 크게 향상시킬 수 있습니다. 앞으로 Anthropic이 이 기능을 어떻게 발전시켜 나갈지, 그리고 이를 통해 AI 협업의 미래가 어떻게 그려질지 기대됩니다.

클로드 아티팩트를 직접 사용해보고 여러분만의 창의적인 활용법을 발견해보세요. AI와의 협업이 가져올 무한한 가능성을 경험하실 수 있을 것입니다.

제가 만든 GPT는 당신이 만든 GPT와 전혀 다릅니다​

모델 성능은 클로드 3.5 소넷 출시 이후로 클로드가 가장 뛰어나지만 챗GPT의 강력한 차별화 요소가 있습니다. 바로 맞춤형 GPT입니다. 하지만 클로드 프로젝트(Claude Projects)의 등장으로 OpenAI의 맞춤형 GPT (GPTs)와 같은 클로드 챗봇 개발이 가능해 졌습니다. GPT에 대해 궁금하시고 관심 있으신 분들을 위하여 GPT 개발 경험을 모두 담아 GPT 관련 책을 출간 하였습니다.

책 표지

제가 만든 GPT는 당신이 만든 GPT와 전혀 다릅니다

상위 1% GPT를 만드는 가장 쉬운 방법

고성능 AI 챗봇을 누구나 쉽게 만들 수 있는 방법을 배워보세요!

저자: 프롬프트해커 대니

비지니스를 위한 마케팅 AI 에이전트를 만드는 라이즈모먼트AI의 CEO입니다. 삼성전자와 카카오에서의 개발 경험과 월 250만명 사용자의 망고플레이트 창업 경험을 바탕으로 GPT 개발과 활용법을 심층적으로 다룹니다.

마무리​

이 튜토리얼을 통해 클로드 3.5 소넷과 아티팩트 기능을 활용하여 간단한 AI 웹서비스를 만들어보았습니다. 이는 AI 기술의 강력함과 접근성을 보여주는 좋은 예시입니다. 여러분도 이를 바탕으로 더 흥미로운 AI 프로젝트를 시도해보시기 바랍니다!

질문이나 도움이 필요하다면 언제든 댓글로 남겨주세요. 함께 배우고 성장해 나가요!