Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
시스템에 디자인 지정 방식이 공식적으로 추가되어 Markdown 파일(DESIGN.md)로 테마를 정의할 수 있게 되었습니다. 이 파일은 색상, 여백 등 구체적인 값을 담고 있으며, AI가 이를 읽어 사용자의 '대화' 지시에 따라 외관을 시뮬레이션 할 수 있도록 합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기지난 실습 편에서는 공개된 시스템의 외관을 AI 어시스턴트에게 의존하여 변경하는 절차를 소개했습니다.
'좋아하는 홈페이지 이미지를 보여주고, '이런 형태로 만들어줘'라고 요청하는' 방식입니다.
그 이후 이 시스템 자체에 디자인 지정 방법이 공식적으로 추가되었습니다.
이번에는 그 추가된 내용을 소개합니다.
새롭게 추가된 것은 디자인을 Markdown 파일로 지정하는 방식입니다.
디자인 전용 폴더 안에 테마별 파일들이 놓여 있습니다.
내용물은 색상, 글자 크기, 여백과 같은 값의 지정과 함께 해당 테마가 어떤 분위기인지 설명한 문구입니다.
준비된 테마는 apple, dala, dope, midnight, notion, example의 6가지 종류입니다.
이름에서 알 수 있듯이, 흰색에 여백이 많은 디자인부터 밤 같은 어두운 디자인, 필기 앱 같은 차분한 디자인 등 분위기가 다른 것들을 갖추었습니다.
중요한 점은 서버 설정도, 변환(빌드) 메커니즘도 건드리지 않았다는 것입니다.
바뀐 것은 파일이 추가되었다는 것뿐입니다.
이 시스템의 본체는 '단순한 파일'이라고 계속 이야기해 왔습니다.
디자인까지 파일이 되었다는 의미가 됩니다.
이 방식의 목표는 AI에게 읽히게 하는 것입니다.
디자인 파일(DESIGN.md)을 AI에 전달하고, '이런 느낌으로', '더 밝게'라고 말로 전하면, AI가 값을 수정하여 시뮬레이션 표시를 만듭니다.
지난 실습 편에서 했던 '이미지를 보여주고 요청하는' 방식에 또 하나의 입구가 생긴 형태입니다.
이미지는 분위기를 전달하고, 파일은 값을 정확하게 전달합니다.
둘 다 갖추고 있으면 상호작용이 편리해집니다.
샘플 중에는 AI와 디자인을 주고받은 기록 자체를 기사로 만든 것도 포함했습니다.
어떤 대화로, 어디까지 변경되는지.
직접 읽어보는 것이 가장 빠르다고 생각합니다.
공개된 샘플 사이트에는 테마 전환 기능을 추가했습니다.
페이지 상단에서 테마를 선택하면 그 자리에서 외관이 바뀝니다.
글은 그대로 유지한 채, 옷을 갈아입히는 것처럼 분위기가 변하는 모습을 볼 수 있습니다.
다만 이 전환 기능은 '선택 사항'입니다.
사이트 설정에서 활성화하거나 비활성화할 수 있습니다.
독자에게 전환의 재미를 느끼게 하고 싶은 사이트도 있고, 외관이 고정되어야 하는 사이트도 있기 때문입니다.
그래서 시스템 측에서 강요하지 않고, 사이트별로 선택할 수 있는 형태로 만들었습니다.
자세한 절차는 가이드 문서에 정리해 두었습니다.
마침 기회가 되어서 재미 요소도 추가했습니다.
공항 안내판처럼 톡톡 넘기는 제목 애니메이션이나, 테마별 제목의 배치 조정입니다.
실용성보다는 파일로 지정할 수 있는 범위가 넓어지면 이런 것도 가능하다는 시도입니다.
이 시스템은 GitHub에서 공개하고 있습니다 (MIT 라이선스).
가지고 가서 자신의 사이트에서 사용해 보셔도 좋습니다.
글은 파일, 외관도 파일입니다.
쓰는 것과 꾸미는 것이 둘 다 같은 무대에 올랐습니다.
그 느낌을 샘플 사이트에서 만져보며 확인해 주시면 좋겠습니다.