Showcases
세 가지 틀로 둘러보세요.
해부 · 만들며 내린 결정의 기록실험 · 웹과 AI를 재해석하는 실험실물 · 직접 만들어 운영 중인 것
해부
전시 01 · 아키텍처
ReactNext라는 사이트에서, 데모를 React로 만들지 않았다
쇼케이스 메뉴를 만들었다. 메인과 전혀 다른 디자인의 데모들 — 다크 테마 AI 챗, 에메랄드 톤 쇼핑몰 — 을 한 사이트에 들여야 한다. 메인은 막 전 라우트 검증을 끝낸 상태다. 당신이라면 어떻게 격리하겠는가?
판단해 보기 →전시 02 · 데이터 설계답글이 달린 댓글을 지우면, 답글은 누구의 것인가
에세이에 댓글과 답글을 붙였다. 어느 날 누군가 답글이 달린 자기 댓글을 지운다. 화면에는 무엇이 남아야 하는가?
판단해 보기 →전시 03 · 운영·수익들어오던 광고 수익을 새 페이지에서 뺐다
3년 운영한 블로그에 AdSense가 붙어 있고, 크진 않아도 매달 돈이 들어온다. 사이트를 '저자의 생각'을 읽는 곳으로 개편한다. 광고는 어떻게 하겠는가?
판단해 보기 →전시 04 · 제품 설계좋아요 버튼에 로그인을 요구하지 않았다
에세이에 👍 반응을 단다. 익명 방문자의 중복 클릭을 어떻게 막겠는가?
판단해 보기 →전시 05 · 콘텐츠 전략3년 치 글 277편을 지우지도, 새 옷을 입히지도 않았다
사이트의 정체성을 바꾼다. 옛 정체성으로 쓴 3년 치 글 277편은 어떻게 하겠는가?
판단해 보기 →전시 06 · 브랜드·디자인아테네 학당을 가져오는 대신, 소실점부터 다시 그렸다
소개 페이지 하단에 라파엘로 「아테네 학당」의 분위기를 들이고 싶다. 어떻게 하겠는가?
판단해 보기 →실험

AI×웹
Pilot
자연어가 UI를 조작 — Gemini function calling으로 테마·정렬·필터·스크롤을 실제로 바꿉니다. 샘플 모드 기본, 키 BYOA.
살펴보기 →소스 보기 ↗

AI×웹
Canvasly
스트리밍 Generative UI — AI의 structured output을 카드·타임라인·체크리스트로 점진 조립. 샘플 모드 기본, 키 BYOA.
살펴보기 →소스 보기 ↗

AI×웹
Relay
승인받고 움직이는 에이전트 — 목표를 단계로 쪼개 [실행]을 눌러야 진행. 6스텝·루프 가드, 결제 직전까지. 샘플 모드 기본, 키 BYOA.
살펴보기 →소스 보기 ↗


