AI와 간단한 수수께끼 스타일의 사이트를 만들어 보기

언뜻 보면 평범한 기업 사이트이지만, 그곳에 숨겨진 키워드를 찾아냄으로써 기괴한 세계관으로 변해가는 사이트를 AI와 함께 만들어 보았습니다.

본 기사에서는 AI로부터 아이디어를 끌어내고, 사양(Specification)을 다듬어 나가는 과정을 기록하고 있습니다.

첫 번째 요구사항은 매우 심플합니다.

모노크롬 베이스로 심플하고 세련된 기업 사이트를 만들어줘.
단, 자세히 보면 내용이 어딘가 기괴한 분위기가 느껴지는 것으로.
사이트 내에 어떤 글자를 한 글자씩 숨겨두고, 그것을 입력하면 작동하는 사양으로 만들고 싶어.

이후에도 어떤 글자를 숨길지 등을 AI와 대화하며, 우선은 평범한 기업 사이트를 작성했습니다.

베이스가 완성되었으므로, 사용자의 액션 시에 기괴한 연출이 발생하도록 만들어 가겠습니다.

code를 전송했을 때, 화면이 어지러워지는 연출이나 노이즈를 넣을 수 있을까?
글자 위치가 어긋나거나, 글자가 깜빡거리며 흑백이 반전되는 버그 같은 화면으로 만들어줬으면 좋겠어.
순수하게 CSS 애니메이션과 JS만으로 화면의 붕괴를 표현해줘.

위의 지시에 따라 AI는 CSS의 @keyframes를 구사하고, clip-path를 통한 화면의 단편적인 이동과 filter: invert(1)를 통한 명암 반전을 조합함으로써 글리치(Glitch) 연출을 구축해 주었습니다.

꽤 간결한 지시였음에도 불구하고, 의도를 파악하여 작성해 주었습니다! 대단합니다!

일부 설계받은 부분에서 아무래도 수수께끼의 구조가 무너져 버리는 부분이 있었는데, AI에게 "로직이 모순되니까 고쳐줘"라고 몇 번이고 수정을 시키는 것보다, 인간 측에서 직접 그 원인을 조사해서 고치는 편이 더 빠른 케이스도 있겠다고 느꼈습니다.

AI는 우수한 코더(Coder)이지만,

• 사양의 전체적인 정합성
• 상태 전이 (State Transition)
• 사용자 만족도 (사용성·이해하기 쉬움)

와 같은 "시스템 전체의 책임"을 자연스럽게 가져다주는 것은 아닙니다.

AI = 구현 속도 부스터

인간 = 설계·정합성·품질 보증

이라는 역할 분담을 하는 것이, 최종적인 개발 속도와 품질 모두 압도적으로 좋아진다고 느꼈습니다.

평소 스스로 작성하고 있기 때문에, 그 시점이 그대로 AI 시대의 개발력이 된다.

라고 실감한 체험이었습니다.

AI에게 막연하게 "재밌게 해줘"라고 부탁하면 평범한 결과가 나옵니다.

"○○와 같은 움직임으로"와 같이 구체적으로 어떤 움직임을 원하는지, 혹은 "어느 타이밍에 어디가 어떻게 변해야 하는지"라는 데이터 구조를 먼저 제시하면, 보다 정밀도 높은 코드를 출력해 주기 쉽다는 인상을 받았습니다.

"뭔가 이상해"라는 애매한 표현이 아니라,

"이 상태에서 여기를 열면 데이터가 사라져 버려서, ○○ 부분에 모순이 생기고 있어"

라고 구체적으로 지적하면, AI는 즉시 코드를 리팩터링(Refactoring)해 줍니다.

제가 사용하고 있는 AI는 왠지 모르게 금방 이미지 생성을 하거나 지시하지 않은 것을 멋대로 만들어 버리기 때문에,

• 지시 이외의 움직임은 하지 말 것
• 필요하다면 제안을 할 것
• 이미지 생성은 "이미지를 만들어줘"라고 했을 때만 할 것

등 명확한 제약을 처음에 설정하여, 의도한 설계를 유지하기 쉽게 만들었습니다.

이 사이트는 아직 버그가 많은 사이트이므로, 인간의 힘도 사용하면서 AI와 함께 개발을 진행해 나가겠습니다!