“헨리님, 저 디자인은 정말 자신 있는데 웹사이트 만드는 건 너무 어려워요. 결국 코딩을 알아야 하는 거 아니에요?”
주변 디자이너분들께 정말 자주 듣는 질문인데요. 제 대답은 “전혀 아닙니다”입니다. 이제는 AI에게 명령 한 줄만 입력하면 마치 사람이 직접 그리듯 웹 디자인을 그려 주고, 클릭 몇 번이면 SEO 세팅까지 끝나 버리거든요.
이번 글에서는 펜슬(Pencil) AI + 클로드 코드 + 워드프레스를 활용해서, 코드 한 줄 직접 쓰지 않고 애플스토어 같은 쇼핑몰 랜딩 페이지를 디자인하고 웹사이트로 발행한 뒤 SEO 세팅까지 끝내는 방법을 정리해 드립니다. 디자인 센스만 준비하시면, 나머지는 AI와 워드프레스가 다 해 줍니다.
펜슬 AI로 웹사이트 만들기, 자세한 내용은 아래 영상 가이드로 설명드리겠습니다.
워드프레스와 AI를 활용해 보다 다양하고, 고퀄리티의 홈페이지를 직접 만들어 보고 싶으신 분들께서는
아래 클래스를 참조해주세요.
영상의 내용을 텍스트로 한번 더 복습하고 싶으신 분들은 아래 내용을 참조해주세요.
디자이너가 웹사이트 만드는 법 -1. 펜슬 설치하고 디자인 요청하기
구글 검색창에 “펜슬 AI”를 검색해서 펜슬 웹사이트에 들어간 뒤, Download Pencil을 눌러 내 PC에 맞는 프로그램을 설치하고 실행합니다.
펜슬을 열면 좌측 아래에 프롬프트 입력창이 있는데요. 여기에 만들고 싶은 웹사이트의 디자인과 참고할 레퍼런스를 넣어 주면 됩니다. 저는 애플스토어 같은 쇼핑몰을 만들고 싶어서, 애플스토어 URL을 복사해 붙여 넣고 이렇게 요청했어요.
“(애플스토어 URL) 애플스토어 같은 쇼핑몰 디자인 해 줘.”
엔터를 치면 펜슬 AI가 마치 사람이 마우스로 그림을 그리듯 웹사이트를 한 화면씩 디자인해 나가고, 잠시 후 멋진 쇼핑몰 디자인이 완성됩니다.
펜슬 AI 웹사이트 만들기 -2. 피그마처럼 문구·이미지 수정하기
펜슬 AI가 다른 AI 디자인 툴과 확실히 다른 점은 수정이 굉장히 편하다는 것입니다.
- 문구를 바꾸고 싶으면 해당 텍스트를 바로 클릭해서 수정하면 되고요.
- 사진을 바꾸고 싶으면 우측 아래 패널에서 이미지만 교체하면 끝입니다.
피그마를 다뤄 보신 디자이너분들이라면 거의 같은 감각으로 디자인을 다듬을 수 있어요.
펜슬 AI 웹사이트 만들기 -3. 클로드 코드로 워드프레스에 발행하기
이제 이 디자인을 실제 웹사이트로 옮길 차례입니다. 클로드 코드에 접속해서 먼저 펜슬 디자인을 읽어 오도록 요청합니다.
“지금 펜슬 대시보드에 나와 있는 디자인 레이어를 읽어 줘.”
클로드 코드가 펜슬에서 만든 ‘애플스토어 랜딩’ 디자인을 성공적으로 읽은 것을 확인했다면, 이어서 이렇게 요청하면 됩니다.
“방금 만든 애플스토어 랜딩 디자인을 워드프레스 웹사이트에 발행해 줘.”
잠시 기다린 뒤 워드프레스 관리자의 페이지 탭을 열어 보면 ‘애플스토어 랜딩’ 페이지가 새로 만들어져 있습니다. 보기를 눌러 보면 펜슬에서 만든 디자인이 싱크로율 99%로 웹사이트에 그대로 발행된 걸 확인할 수 있어요.
펜슬 AI 웹사이트 만들기 -4. 워드프레스 SEO 세팅으로 마무리하기
여기서 끝나면 아쉽겠죠? 워드프레스의 진짜 장점은 디자인뿐 아니라 SEO 세팅까지 한 번에 끝낼 수 있다는 점입니다. 발행된 페이지에서 엘리멘터로 편집을 누른 뒤, 왼쪽의 SEO 탭을 열어 주세요.
- 왼쪽에 보이는 점수표가 이 페이지가 얼마나 SEO 친화적인지 알려 줍니다.
- 포커스 키워드에 노출시키고 싶은 키워드(저는 “아이폰 17 프로”)를 입력하고, 스니펫 편집에서 제목·퍼머링크·설명에 모두 포커스 키워드를 넣어 줍니다. 이것만으로 점수가 63점까지 올라가요.
- 아래쪽 SEO 가이드에서 분홍색으로 표시된 항목을 초록색으로 바꿔 주면 점수가 70~80점까지 올라갑니다.
이렇게 SEO 점수를 올려서 발행하면, 내 웹사이트가 구글 1페이지에 노출되기 위한 기본 세팅은 모두 마무리됩니다.
마무리
디자인은 AI가 그리고, SEO는 워드프레스가 잡아 주니까 이제 디자이너분들도 코딩 없이 웹사이트 제작까지 충분히 하실 수 있습니다.
펜슬로 디자인 → 피그마처럼 수정 → 클로드 코드로 워드프레스 발행 → SEO 세팅, 이 네 단계만 기억해 두세요. 웹사이트를 SEO 마케팅 수단으로까지 활용할 수 있게 되면 디자이너로서의 몸값도 확실히 달라질 거예요.
아직 워드프레스가 어려우신 분들은 단돈 6,050원으로 시작하는 무료 튜토리얼부터, AI 디자인 툴 활용이 더 궁금하신 분들은 아래 글도 같이 참고해 보세요.
함께 보면 좋은 글: 80만원 아끼는, 워드프레스 사용법 (2026 최신판)
함께 보면 좋은 글: 피그마 웹사이트 만들기, 100% 노코드로 가능합니다!
함께 보면 좋은 글: 10분만에 애플스토어 만들기, 워드프레스 쇼핑몰 활용
워드프레스를 통해 다양한 홈페이지와 퀄리티높은 블로그를 만들어보고 싶은 분들은
아래 클래스를 참조해주세요.
