클로드 ai 활용하면 5분 만에 웹사이트 하나 뚝딱 만들 수 있습니다.
클로드 ai 가 챗GPT 보다 한글 표현 능력이 훨씬 좋다는 평가가 많이 나오고 있는 데요.
그 만큼 한글 표현 능력 뿐만 아니라 뛰어난 텍스트 이해 및 생성 능력 분야에서는 거의 인간 수준의 이해력과 유창함을 보입니다.
오늘은 클로드 ai 아티팩츠(Artifacts) 기능을 통해서 웹사이트 하나 가볍게 만드는 방법을 소개합니다.
아티팩트는 사용자가 AI의 작업 과정을 실시간으로 확인하고 편집할 수 있는 협업 공간을 제공하는 기능을 의미 합니다.
1. 클로드 ai 아티팩트 기능 알아보기
챗GPT는 챗팅 방식으로 대화가 세로로 진행되는 반면 클로드 ai 아티팩츠 기능은 왼쪽은 챗팅 화면 오른 쪽은 ai의 작업 창을 배열해 두 가지 작업을 동시에 할 수 있습니다.
클로드 ai 에서 아티팩츠 기능을 사용하기 위해서는 아래 이미지의 빨간색 박스 안에 있는 아이콘을 클릭합니다.
그러면 아래와 같은 화면이 팝업 됩니다. 화면 중간 “Artifacts” 메뉴 오른 쪽을 보면 “On or OFF” 선택 버튼을 볼 수 있는데 이 버튼을 화면과 같이 “On” 으로 해 놓습니다.
그러면 클로드 ai 를 사용할 때 마다 별도 작업을 하지 않아도 채팅을 하면서 동시에 오른 쪽 화면에서 ai가 작업 하는 모습을 동시에 보면서 작업을 할 수 있습니다.
2. 홈페이지 기획 단계부터 클로드 ai 에게 보고 받고 시작하기
클로드 ai 를 프롬프트 명령어 만을 사용해서 웹사이트 코딩 부터 디자인까지 생성하는 과정을 설명해 드리도록 하겠습니다.
등산용품을 판매하는 웹사이트를 만들어 보겠습니다. 아래와 같이 프롬프트를 작성해 실행시켰습니다.
” 나는 고객들이 나의 상품과 서비스를 한눈에 잘 이해할 수 있는 직관적인 쇼핑몰 홈페이지를 만들려고해.
홈페이지는 등산용품을 판매하는 쇼핑몰이야
우리 쇼핑몰의 이름은 산사랑이야. 등산복은 팔지 않고 그외의 등산용품을 판매해
품질과 디자인이 좋아 많은 고객들이 이용하고 있어.
한번 사용해본 고객들은 만족도가 높고 재구매를 많이 하고 있어
고객의 불만은 고객서비스센터를 통해 즉시 해결하고 있고 SNS를 통해 고객들과 소통을 하고 있어.
모든 제품은 무료로 배송하고 있고 품질이 좋은 제품과 트랜디한 디자인을 중심으로 제품을 소싱하고 있고 가격은 중고가 상품이야이와 관련된 홈페이지를 기획하고 상세페이지 템플릿을 제안해줘”
클로드 ai가 아래와 같이 요청한 프롬프트 조건에 맞는 웹사이트 기획안을 생성해서 내가 마음에 드는지 아닌지를 먼저 확인하는 결제를 요청하고 있습니다.
2~3년차 웹사이트 기획자가 할 일을 1분도 안돼 기획을 완료해 예의 바른 태도로 보고까지 하고 있는 장면을 상상해 보세요.
그 일을 ai가 하고 있습니다.
그리고 자기(클로드ai) 웹사이트의 특징과 기획의도, 그리고 추가 되면 좋을 것 같은 내용을 정리해서 아래와 같이 의견을 제시합니다. 당연히 전문가 수준의 제안입니다.
만약 회사라면 이 같이 보고하는 담당자가 있다면 얼마나 칭찬을 많이 받을까요?
3. 클로드 ai 가 코딩한 메인페이지 결과물 확인하기
그럼 지금부터 웹사이트 코딩과 디자인을 시작해 보도록 하겠습니다.
클로드 ai에게 “웹사이트의 메인페이지를 만들어 주고, 예시를 3개 만들어줘” 하고 요청했습니다.
아래 왼쪽과 같이 답변을 해주면서 동시에 오른쪽 HTML 코딩과 CSS로 디자인된 웹사이트를 동시에 보여 줍니다.
이 기능이 위에서 설명했던 “아티팩트” 기능이자 클로드 ai의 강점입니다.
참고로 오픈 ai의 챗GPT는 현재까지 이런 기능을 제공하지 않고 있습니다.
화면 오른쪽 위 모서리에 “Preview 와 Code” 버튼이 있는데 선택에 따라 웹사이트 모습과 코드를 선택해서 볼 수 있습니다. 아래 이미지는 “Code”를 선택했을 때 보여지는 화면입니다.
4. 상품리스트 페이지 만들기
이번엔 “상품리스트 페이지를 만들어” 달라고 요청했습니다.
HTML과 CSS 로 상품리스트 페이지를 만들어 주겠다고 하더니 20초도 않되서 왼쪽과 같이 상품리스트 페이지를 개발하고 이 페이지의 특징과 추가로 고려해야 할 사항 등을 정리해서 보고해 줍니다.
추가로 고려해야 할 사항 등이 맘에 들면 그렇게 해 달라고 요청하면 다시 코딩해서 수정해서 결과물을 만들어 줍니다.
만들어진 오른쪽 상품리스트 페이지가 맘에 드시나요?
“등산용품 목록” 아래 필터 카테고리가 세로로 나열 되어 있어 어색하고 보기 안 좋은 것 같아 필터 카테고리를 가로로 나열해서 다시 작성해 달라고 요청했습니다.
그랳더니 10초도 안 돼서 아래와 같이 필터 카테고리 위치를 수정해서 작성해 줍니다.
5. 결론
지금까지 클로드 ai의 파워풀한 “아티팩트” 기능을 활용한 웹사이트 작성 방법을 설명드렸습니다.
웹사이트 기획안을 작성을 시작으로 단계별로 각 페이지들의 코딩과 디자인을 해 나가면 됩니다.
한번에 모든 페이지들을 작성해 달라고 요청할 수도 있지만 클로드 ai 는 실시간으로 채팅 내용과 결과물을 확인하면서 작업을 할 수 있기 때문에,
각 페이지 별로 작업하면서 수정 보완해 나가는 걸 추천 드립니다.
아래는 ‘회사 소개 페이지’ 입니다. 빈칸은 1200 X 400 사이지의 이미지를 작성해서 업로드 하면 됩니다.
