완성품보다 만드는 과정이 재미있어서
새 AI가 나오면 설명만 읽기보다 작은 서비스를 만들어보고 싶었습니다. 그래서 공식 발표를 확인한 짧은 관측 기록과 직접 만든 서비스, 업무에서 써본 AI 활용 사례를 한곳에 남깁니다. 거창한 프로젝트 모음보다 계속 바뀌는 개인 실험실에 가깝습니다.
첫 디자인은 왜 다시 만들었나
처음에는 어두운 배경에 카드와 작은 효과를 얹었습니다. 하지만 원하는 레퍼런스의 입체감과 장면 전환이 느껴지지 않았습니다. 희미한 효과를 더하는 대신 수면의 배와 어부, 낚싯줄, 심해 생물, 청록색 털 지형으로 화면 자체를 다시 구성했습니다.
생성 이미지로 방향을 먼저 확인하고, 배경과 HTML 콘텐츠를 분리했습니다. 글자는 이미지에 굽지 않아 검색과 접근성을 유지하고, 모바일에서는 이미지와 본문을 다른 비율로 배치할 수 있게 했습니다.
내가 정한 것과 AI가 도운 것
- 운영자: 콘셉트와 레퍼런스 선정, 디자인 방향 결정, 실제 화면 피드백, 공개할 내용과 게시 승인.
- AI: 배경과 생물 이미지 생성, HTML·CSS·JavaScript 코드 작성 보조, 오류 수정과 검증 보조.
- 함께 반복한 과정: 시안 확인, 웹 구현, PC·모바일 화면 피드백, 잘림과 여백 수정.
이 사이트를 전부 수작업으로 코딩했다고 주장하지 않습니다. AI가 만든 결과를 그대로 받는 것보다, 원하는 것을 구체적으로 설명하고 결과를 확인하며 고치는 경험을 기록합니다.
실제로 구현한 인터랙션
- 낚싯줄을 따라 내려가는 장면 구성과 스크롤 수심 표시.
- WebGL로 커서나 터치 주변의 배경 픽셀을 변형하는 털 밀림 효과. 개별 털의 물리 시뮬레이션은 아닙니다.
- 배경에서 분리한 고래·해파리·가오리·게의 느린 유영. 가까운 자리에서 부유하는 연출이며 자유롭게 돌아다니는 3D 생물은 아닙니다.
- 화면 밖과 비활성 탭에서 유영 정지, 움직임 줄이기 설정에서 정적인 화면 제공.
- 작은 화면의 본문·이미지 재배치, 터치 스크롤을 막지 않는 입력 처리, WebGL을 사용할 수 없을 때의 정적 배경.
자동으로 만들되, 공개는 내가 결정합니다
공식 발표를 확인한 브리핑 초안은 비공개 저장소에 보관하고 텔레그램 검토 봇의 승인 대기열로 전달하는 구조입니다. 검토 후 운영자가 정식 게시를 승인한 글만 공개합니다. 보류나 수정 요청을 승인으로 취급하지 않습니다.
출처 주소 검사와 중복 게시 방지는 운영 안전장치이지, 내용의 사실성을 자동으로 보장하는 기능은 아닙니다. 발표 원문, 날짜, 지원 범위와 실험 결과를 별도로 확인합니다. 수정 요청 후 자동 재작성 연결은 별도의 권한 설정이 필요한 후속 작업입니다.
사용한 구성과 직접 확인할 곳
HTML, CSS, JavaScript와 WebGL로 화면을 만들고, Python 기반 승인 봇, GitHub 저장소, Hetzner 서버와 Apache로 운영합니다. 수정 사항은 서버가 저장소에서 받아 미리보기를 갱신하고, 별도 정식 배포 요청으로 공개 화면에 반영합니다.
아직 더 확인할 것
실제 기기마다 GPU 성능과 브라우저 동작은 다릅니다. 코드 검증과 화면 피드백을 반영했지만 모든 iPad·모바일 기종에서 같은 움직임을 보장하지 않습니다. 사내 활용 사례의 성과 수치는 운영자가 제공한 기록이며 공개 원자료가 없는 수치를 이 사이트의 성과로 합산하지 않습니다.
이곳의 목적은 AI로 무엇이든 완벽하게 만들 수 있다는 증명이 아니라, 즐겁게 만들고 실제로 써보고 개선하는 과정을 남기는 것입니다.