Blog
[IP 마케팅] '100일의 거짓말' 마이크로 사이트로 본 인터랙티브 웹사이트 설계 전략
100일의 거짓말 사례를 통해 본 인터랙티브 웹사이트 설계 전략 4가지. IP 마케팅의 몰입도를 높이는 공간 탐색 UI, 참여형 인터랙션, 생성형 AI 활용법을 알아보세요.
📍핵심 요약
방문자를 몰입시키는 캠페인 사이트의 핵심은 직접 탐험하는 세계관 설계에 있습니다. tvN 드라마 <100일의 거짓말> 공식 마이크로 사이트와 동아일보 프로젝트를 통해, 인터랙티브 웹사이트로 구현하는 실전 IP 마케팅과 AI 마케팅 사례 전략 4가지를 정리합니다.
“마이크로 사이트를 열었는데 메인 화면만 보고 나가요. 다시 들어올 이유는 어떻게 만들까요?”
tvN 드라마 <100일의 거짓말> 공식 마이크로 사이트는 단순 정보 전달을 넘어, 유저가 작품 속 '경성 첩보 지도' 세계관을 직접 체험하도록 설계한 인터랙티브 웹사이트입니다.
캠페인 목표에 따라 적용할 수 있는 인터랙티브 웹사이트 핵심 전략 4가지를 살펴봅니다.
첫 화면부터 IP 세계관에 깊이 몰입시키고 싶다면? → 공간 탐색형 지도 UI
콘텐츠를 끝까지, 능동적으로 보게 만들고 싶다면? → 직접 찾아내는 참여형 인터랙션
기술로 몰입도와 개인화 경험을 극대화하고 싶다면? → 생성형 AI 접목
일회성 방문을 넘어 지속적인 재방문을 유도하고 싶다면? → 미니게임과 단계별 순차 오픈
사이트에 들어서는 순간 IP 세계관에 몰입하게 하려면?

1930년대 경성 지도로 구성한 <100일의 거짓말> 웹사이트 메인 화면
1930년대 경성 지도를 전면에 내세운 <100일의 거짓말>은 유저가 경성역·사진관·한성 한의원·조선총독부 등 작품 속 공간을 직접 탐험하며 콘텐츠를 발견하는 공간 탐색형 지도 UI를 구현했습니다.

<100일의 거짓말> 웹사이트 입장 화면과 장소별 콘텐츠
'밀정' 콘셉트로 시작하는 입장 화면: 접속 시 "이 지도는 오직 밀정만 확인할 수 있습니다"라는 안내와 함께 "네, 밀정이 되겠습니다" 버튼을 누르게 해, 첫 클릭부터 드라마 설정에 자연스럽게 스며들도록 유도
장소별 콘텐츠 배치: 이야기의 출발점인 '경성역'에는 기획의도와 인물 정보·회차 미리보기를, '시네마'에는 영상을, '사진관'에는 사진을 배치해 공간의 성격과 콘텐츠를 직관적으로 연결
콘텐츠를 보여주는 대신 직접 찾게 하려면?
단순 스크롤로 훑어보는 방식은 유저가 금방 이탈하기 쉽지만, 직접 조작해 콘텐츠를 발견하게 하면 체류 시간과 몰입도를 동시에 높일 수 있습니다. <100일의 거짓말>은 장소마다 직접 조작해야 숨겨진 콘텐츠가 열리는 인터랙션 장치를 배치했습니다.

<100일의 거짓말> 체험형 인터랙션 4가지
문질러서 사진 현상하기: 사진관 ‘유실물 보관함’ 편지 속 필름을 클릭해 마우스로 문지르면 드라마 장면과 대사가 나타나는 연출
초점 맞춰 촬영하기: 카메라 조리개를 클릭해 연 뒤 계기판을 좌우로 움직여 초점을 맞추면 사진이 찍히고, 뒷면에서 드라마 대본 일부를 확인할 수 있는 연출
먼지 털고 임무 확인하기: 조선총독부 집무실의 먼지를 턴 뒤 타자기를 클릭하고 화면을 눌러 조명을 켜면, 드라마 속 주인공의 핵심 임무가 타자로 쳐지며 나타나는 단계별 인터랙션
인물에게 전화 걸기: 사진관 전화기에서 통화할 인물을 선택해 '통화' 버튼을 누르면 음성 메시지가 재생되는 연출
지속적인 재방문과 유저 인게이지먼트를 만들려면?
마이크로 사이트가 런칭 초기의 일회성 관심에 그치지 않으려면 유저가 다시 방문할 동기가 필요합니다. <100일의 거짓말>은 다음 콘텐츠에 대한 기대감과 자발적인 참여를 이끄는 5가지 장치로 재방문 루프를 설계했습니다.

<100일의 거짓말> 웹사이트 내 '밀정 잠입게임'
기록과 랭킹이 남는 미니게임: 희원의 '밀정 잠입게임'에서 개인 최고 기록과 전체 랭킹을 제공하고, 결과 이미지를 저장할 수 있게 해 반복 플레이와 SNS 인증 유도
소장형 디지털 굿즈: 사진관 '달력'에서 배우 사진과 친필 손글씨·사인이 담긴 고화질 배경화면을 제공해 팬덤의 자발적 저장과 바이럴 유도
온·오프라인 축하글 게시판: 경성역 '100일의 거짓말 신문'에 온라인 축하글과 서울역사박물관 현장 관람객의 손글씨 방명록을 한 화면에 결합
방영 주기에 맞춘 순차 공개 구조: 미공개 공간 클릭 시 추후 오픈 안내 문구로 호기심을 자극하고, 한성 한의원 '구국단 게시판'과 경성역 '경성사건보'를 매주 업데이트하며 신규 콘텐츠에 'NEW' 표시를 띄워 지속적인 탐색 유도
AI로 세계관 몰입과 개인화 경험을 극대화하려면?
앞선 사례처럼 작품의 세계관과 시대적 배경을 시각적 공간으로 구현하는 것을 넘어, 생성형 AI와 가상 페르소나를 스토리텔링의 중심에 두는 설계도 가능합니다. 위에이알이 제작한 동아일보 신동아 「2012년생 김서연」 프로젝트의 핵심은 중학생 30여 명의 방대한 심층 취재 데이터를 ‘가상 인물 김서연의 하루’라는 이야기로 재구성해, 읽는 기사를 직접 체험하는 콘텐츠로 확장한 데 있습니다.

동아일보 「2012년생 김서연」 인터랙티브 웹페이지
AI 시네마틱 오프닝으로 즉각적인 몰입 유도: AI로 제작한 인트로 영상과 휴대폰 채팅 화면을 도입부에 배치해, 긴 설명 없이도 유저가 가상 인물 서연의 일상에 바로 빠져들도록 설계
실제 데이터를 결합한 탐색형 교실 좌석표: 취재한 학생들의 AI 이용 프로필을 좌석표 UI로 시각화해, 유저가 서연 주변 친구들의 데이터를 직접 열어보며 세계관의 현실감을 체감하는 구조
페르소나 AI 채팅으로 개인화 경험 완성: 아웃트로에서 서연과 실시간으로 대화하는 AI 채팅에 휴식 영상(불·폭포·숲·우주)을 결합해, 유저 스스로 AI와 함께하는 일상을 돌아보는 양방향 개인화 경험 제공
단순히 AI를 제작 보조 도구로 쓰는 데 그치지 않고, 가상 페르소나 설계부터 오프닝 영상, 마지막 실시간 대화까지 유저 여정의 시작과 끝에 AI를 배치해 몰입도와 개인화 경험을 극대화한 사례입니다.
🚀 IP 마케팅 인터랙티브 웹사이트 제작 전 필수 체크리스트 4
✅ 세계관 기반 정보 구조: 메뉴와 배너를 나열하는 대신, IP의 세계관이 사이트 구조와 내비게이션에 그대로 녹아 있는가?
✅ 직접 해보는 인터랙션: 콘텐츠를 바로 보여주는 대신, 문지르기·초점 맞추기처럼 유저가 직접 찾아내는 장치가 있는가?
✅ AI를 활용한 몰입 설계: 가상 페르소나, AI 오프닝 영상, 실시간 AI 채팅 등을 활용해 스토리텔링 몰입도와 개인화 경험을 함께 높였는가?
✅ 재방문을 부르는 루프 설계: 콘텐츠 순차 오픈, 랭킹 게임, 디지털 굿즈처럼 런칭 이후에도 다시 찾을 이유가 설계되어 있는가?
유저 경험에 지독하게 진심인 위에이알 경험 설계 연구소
[오지LAB]의 인사이트를 매주 만나보고 싶다면? 👇
·
·
·
위에이알(WE-AR)은 유저의 보이지 않는 동선과 심리까지 디테일하게 참견하여, 브랜드의 메시지를 '지독하게 매끄러운 경험'으로 설계합니다.
"우리 IP와 브랜드의 세계관을 담은 인터랙티브 웹사이트가 고민이라면?"
지금 바로 위에이알과 함께 캠페인 목적에 최적화된 인터랙티브 경험을 상의해보세요.
🙋 경험 설계 FAQ
🔍 IP 마케팅 인터랙티브 웹사이트 제작 자주 묻는 질문 (FAQ)
Q1. 드라마·브랜드 캠페인에 마이크로 사이트를 따로 만들어야 하는 이유는 무엇인가요?
A1. 공식 홈페이지나 SNS만으로는 담기 어려운 캠페인만의 세계관과 경험을 전달하기 위해서입니다. <100일의 거짓말> 사례처럼 사이트 구조 자체를 IP의 세계관으로 설계하면, 유저가 정보를 읽는 데 그치지 않고 콘텐츠를 탐험하며 더 오래 머무르게 됩니다.
Q2. 인터랙티브 웹사이트에서 유저의 체류 시간을 늘리려면 어떻게 설계해야 하나요?
A2. 콘텐츠를 바로 노출하는 대신 유저가 한 번의 동작을 거쳐 직접 찾아내도록 설계하는 것입니다. 필름을 문질러 사진을 현상하거나, 동아일보 신동아 「2012년생 김서연」 사례처럼 교실 좌석표에서 학생 프로필을 하나씩 열어보는 탐색형 구조를 더하면 자연스럽게 체류 시간이 늘어납니다.
Q3. IP 마케팅 캠페인에 AI를 활용할 때 고려해야 할 점은 무엇인가요?
A3. AI가 맡을 역할과 유저가 체감할 경험을 명확히 설계하는 것입니다. 동아일보 신동아 「2012년생 김서연」 프로젝트가 방대한 취재 데이터를 가상 페르소나와 오프닝 영상, 실시간 AI 채팅으로 풀어낸 것처럼, 단순 제작 보조를 넘어 유저 여정의 핵심 접점에 AI를 배치할 때 몰입도와 개인화 경험을 극대화할 수 있습니다.
Q4. 마이크로 사이트가 단발성 방문으로 끝나지 않고 지속적인 재방문을 이끌어내려면 어떻게 설계해야 하나요?
A4. 콘텐츠 공개 일정에 맞춘 순차 공개와 소장 욕구를 자극하는 디지털 굿즈를 결합하는 것입니다. <100일의 거짓말>의 랭킹 미니게임과 대사 회차별 업데이트, 동아일보 신동아 「2012년생 김서연」의 연재 일정에 맞춘 챕터 오픈처럼 '다음에 또 들어와야 할 이유'를 타임라인과 맞물려 설계하면 높은 인게이지먼트를 유지할 수 있습니다.
작성일:
추천 아티클
[트렌드 코리아 2027] 권태사회와 폼팩터 시프트, 체험형 마케팅 성공 전략 (오레오·동국제약 사례)
Blog
2026. 11. 9.
[연말 행사 팝업] AI 키오스크·AI 포토부스 맞춤 제작 성공 사례 (올리브영·tvN·아디다스·웁서울)
Blog
2026. 11. 2.
브랜드 캠페인 성공 사례|SK하이닉스 ThanksFULL Day 참가자가 만난 실시간 AI 캐릭터 체험
Blog
2026. 10. 26.
[연말·새해 마케팅] 신세계·스픽·대한상공회의소·스노우맨 사례로 본 오프라인 인터랙티브 경험 설계
Blog
2026. 10. 19.
오프라인 마케팅 성공 사례 | '수원화성 미디어아트'로 본 프로젝션 맵핑과 인터랙티브 경험 설계
Blog
2026. 10. 5.
브랜드 캠페인 성공 사례|현대자동차 포레스트런 마라톤 완주자가 받은 실시간 AI 영상 기록증
Blog
2026. 9. 28.






