Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
이 글은 코딩 지식 없이 AI 어시스턴트를 활용하여 웹사이트의 외관을 변경하는 방법을 안내합니다. 사용자는 스마트폰으로 URL과 참고 이미지를 제공하고, '더 밝게', '글자 크게'와 같은 자연어 프롬프팅만으로 원하는 디자인 규칙을 반복적으로 다듬을 수 있습니다. 글 내용과 외관이 분리되어 있어 안전하게 수정할 수 있다는 것이 장점입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기지난 글에서 홈페이지의 구조(Markdown CMS)를 자유롭게 사용할 수 있는 형태로 공개했습니다.
오늘은 그에 이어서 '외관을 바꾸는' 절차에 대해 작성하겠습니다.
절차가 적혀 있으면 그것만으로도 훨씬 사용하기 쉬워질 것입니다.
프로그램을 코딩하는 이야기는 나오지 않습니다.
컴퓨터가 없어도 괜찮습니다.
작업은 AI 측에서 진행되기 때문에, 스마트폰으로 요청하는 것만으로 충분합니다.
실제로 저는 이 블로그 주변의 작업을 전부 스마트폰으로 하고 있습니다.
AI 어시스턴트에게 공개할 주소(URL)를 전달하고 '이것을 가져와라'라고 요청합니다.
기술적인 용어로는 '클론(clone)'이라고 하지만, 본질적으로는 통째로 복사해 오는 것입니다.
가져오는 곳은 AI가 작업하는 공간이기 때문에, 직접 명령어를 입력하거나 자신의 기기에 무언가를 넣을 필요가 없습니다.
공개처: GitHub (oosawak/markdown-cms)
불러오기가 완료되면, 원하는 홈페이지 이미지를 AI에게 보여주며 '이 모양으로 해달라'고 요청합니다.
AI는 색상이나 글자 크기, 사물의 배열 방식 같은 '외관의 규칙'을 수정하여 시험적인 표시(프리뷰)를 만들어 줍니다.
한 번에 결정되는 것은 거의 없습니다.
'더 밝게', '글자를 크게', '사진을 더 크게 보여줘'.
이렇게 말로 전달하면, AI가 수정하고 다시 시험적인 표시를 만듭니다.
이 과정을 몇 번 반복하면서 마음에 드는 형태로 다듬어 나갑니다.
형태가 결정되면, '공개해 달라'고 요청합니다.
뒷단 보관소(GitHub)에 놓이는 것까지 AI가 처리해주기 때문에, 잠시 기다리면 새로운 외관의 사이트가 표시됩니다.
이 구조에서는 글 내용과 외관이 분리되어 있습니다.
외관의 규칙을 수정해도 작성된 글 내용은 건드리지 않습니다.
따라서, 외관을 시험적으로 변경한다고 해서 글이 사라질 염려는 없으며, 마음에 들지 않으면 이전 외관으로 되돌릴 수도 있습니다.
한 가지.
AI가 만드는 것은 '이 형태로 다듬은 것'이지, 참고 자료와 똑같은 복사본은 아닙니다.
색상이나 배열의 분위기를 비슷하게 맞춘다고 생각하는 것이 적절합니다.
또 한 가지.
참고 자료로 사용하는 이미지는 분위기 참고용입니다.
다른 사람 사이트의 사진이나 글을 그대로 자신의 것처럼 사용하는 것은 삼가야 합니다.
외관은 나중에 얼마든지 바꿀 수 있습니다.
그러니 순서를 거꾸로 해도 괜찮습니다.
먼저 글을 작성하여 공개하고, 외관은 사용하면서 마음에 드는 형태로 다듬어 가는 것입니다.
이러한 간편함이야말로 프로그램을 구동하지 않는 시스템의 장점이라고 생각합니다.