웹사이트
변경 야간 투어 웹사이트 디자인
상상 속 송대 변경을 관통하는 인터랙티브 야간 여정으로, 지속되는 강변 도시와 시, 등불, 다국어 장별 흐름을 결합합니다.
LLM Arena 2026년 9월
케이스 노트- 모델
- GPT 6 Sol
- 디자인 과제
- 상상 속 송대 변경을 관통하는 다국어 인터랙티브 야간 여정을 만드세요.
- 결과물
- 웹사이트
대상 분야
- 문화 스토리텔링 웹사이트역사적 해석을 분위기 있고 탐색 가능한 디지털 여정으로 구성합니다.
- 디지털 전시 경험대형 내러티브 타이포그래피를 장면, 장, 반응형 로컬 상태와 연결합니다.
- 인터랙티브 에디토리얼 콘텐츠고정된 Three.js 세계가 긴 형식의 이야기를 전달하는 방식을 탐구합니다.
핵심 특징
- 지속되는 강변 도시하나의 애니메이션 도시가 다섯 장의 전환 뒤에 계속 남아 있습니다.
- 다국어 길찾기중국어, 영어, 일본어 컨트롤이 전체 여정에서 계속 표시됩니다.
- 시에서 등불로선택한 중국어 한 줄이 읽기 화면에서 마지막 장면으로 이어집니다.
변경 야간 투어 웹사이트 미리보기
1 / 6
변경 야간 투어 웹사이트가 세계를 구축하는 방식
변경 야간 투어 웹사이트 디자인은 연결된 다섯 장을 통해 송대 변경의 상상 속 밤을 보여 줍니다. 현대적인 문화 해석은 《청명상하도》에서 도시의 정서를 가져오고 고전시의 야간 풍경을 참고합니다. 실제 투어, 예약 서비스 또는 역사적으로 검증된 복원이 아닙니다.
히어로는 핵심 장치를 즉시 확립합니다. “등불의 강을 따라 변경의 어느 밤으로 들어가세요.” 지속적인 Three.js 강변 도시가 에디토리얼 레이어 뒤에 놓이고, 장 표시기, Day / Night 컨트롤, 언어 전환기가 경험을 서로 무관한 다섯 페이지가 아닌 하나의 여정으로 읽히게 합니다.
시각 자료는 어두운 푸른 도시, 따뜻한 창빛, 대형 크림색 타이포그래피 사이의 의도적인 대비를 보여 줍니다. 이러한 크기는 각 장에 분명한 정서적 분위기를 부여하지만, 밀도 높은 컨트롤에 사용할 수 있는 공간은 줄입니다. 따라서 디자인은 주요 문장과 경쟁하지 않도록 인터랙션 그룹을 핵심 문장 아래나 옆에 배치합니다.
현대적 해석
출처에는 퍼블릭 도메인 회화 자료, 퍼블릭 도메인 고전 운문, AI로 제작한 송대풍 일러스트가 명시되어 있습니다. 이 요소들은 장소에 대한 설계된 해석을 구성할 뿐, 묘사된 거리나 건물, 여정이 제시된 모습으로 실제 존재했다는 증거는 아닙니다.
이러한 경계는 문화 팀에 유용합니다. 시각적·시적 분위기를 차용하면서도 경험의 프레이밍을 명확하게 유지할 수 있기 때문입니다. 마무리 주석도 이 구분을 반복하며, 실제 장소를 대신하는 것이 아니라 현대적으로 상상한 것이라고 설명합니다.
이 문화 스토리텔링 패턴이 어울리는 분야
이 사례는 시각 아카이브를 바탕으로 안내형 디지털 내러티브를 개발하는 문화 기관, 에디토리얼 팀, 경험 디자이너에게 적합합니다. 기존의 지도나 목적지 페이지 대신 순서, 분위기, 해석적 맥락을 통해 장소를 탐색하는 방식을 보여 줍니다.
다섯 장은 유용한 속도 조절 모델을 만듭니다. 방문자는 먼저 물의 문에서 도시를 만나고, 무지개다리를 건너 시장에 들어간 뒤, 물가에서 시와 함께 잠시 멈추고, 돌아오는 등불과 함께 마무리합니다. 각 지점의 주제는 바뀌지만 기반이 되는 도시는 연속성을 유지합니다.
아카이브 중심 해석
퍼블릭 도메인 회화를 시각적 참조로 사용하면서 그 주변을 새로운 분위기의 장면으로 구성하세요. 시장 장에서는 “View full artwork” 경로를 통해 라이브 장면 아래에 출처 이미지가 나타나므로, 아카이브 자료가 해석을 대체하지 않고 뒷받침합니다.
장 기반 전시
긴 형식의 이야기를 서로 구별되고 탐색 가능한 다섯 순간으로 전환하세요. 지속되는 01–05 내비게이션은 방향을 제공하고, “Tea · Silk · The Sound Of The Street”와 같은 장 라벨은 변화하는 감각적 초점을 설정합니다.
인터랙티브 시 읽기
시를 정적인 장식으로 다루지 말고 독자가 한 줄을 선택하게 하세요. 강등으로 마무리되는 장면은 테스트한 문장 “海上明月共潮生。”을 더 큰 해방의 순간으로 가져가 읽기와 마지막 장면을 연결합니다.
다섯 장이 하나의 애니메이션 도시를 공유하는 방식
페이지는 히어로와 다섯 장을 나타내는 여섯 개의 전체 화면 캡처와 하나의 고정된 애니메이션 캔버스를 사용합니다. 가벼운 내비게이션 스트립은 이 연속적인 장면에서 파생되며, 원본 갤러리 업로드는 변경되지 않습니다. 이 구조는 에디토리얼 레이어가 진행되는 동안 도시가 지속되게 합니다.
컨트롤은 의도적으로 안정적으로 유지됩니다. 중국어, EN, 日本語가 Day / Night 및 장 번호와 함께 상단 내비게이션에 남아 있습니다. 언어 컨트롤은 다국어 디자인 시스템을 나타내지만, 제공된 증거만으로 모든 번역의 완성도나 런타임 동작을 확정할 수는 없습니다.
안정적인 레이어
강변 도시와 장 내비게이션이 방문자가 초점을 바꾸는 동안 방향 감각을 유지합니다.
변화하는 레이어
시장 선택과 등불 선택이 새 페이지 없이 로컬 반응을 제공합니다.
에디토리얼 레이어
큰 제목과 짧은 장면 설명이 각 상태의 정서적 속도를 조절합니다.
| 관찰 요소 | 독자 효과 | 절충점 |
|---|---|---|
| 지속되는 강변 장면 | 장 전체에서 공간적 연속성을 유지함 | 텍스트 및 컨트롤과 경쟁할 수 있음 |
| 네 가지 시장 컨트롤 | 로컬 원인과 반응을 추가함 | 인터랙션 밀도를 높임 |
| 선택한 중국어 한 줄 | 읽기와 피날레를 연결함 | 언어와 상태의 식별 가능성을 세심하게 관리해야 함 |
문에서 다리로
첫 장은 안개, 겹겹의 처마, 어둠에서 나타나는 배와 함께 방문자를 물의 문에 세웁니다. 두 번째 장은 같은 강을 건너는 장소로 다시 구성합니다. 무지개다리의 등불, 다리 아래의 배, 갑판 위의 실루엣이 나타납니다. 물을 재사용하면 전환을 이해하기 쉬워지고, 경계에서 통로로의 변화는 내러티브를 계속 움직이게 합니다.
시장 상태와 로컬 피드백
시장 장에는 Tea Seller, Silk Shop, Iron Flowers, Fireworks라는 네 가지 컨트롤이 도입됩니다. 테스트한 Fireworks 상태는 로컬 메시지를 바꾸며, 작은 인터랙션이 안정적인 장면의 의미를 어떻게 바꿀 수 있는지 보여 줍니다. 그 대가로 밀도가 높아집니다. 네 가지 컨트롤, 설명 문구, 시각적 장면이 모두 대형 장 제목과 경쟁합니다.
시 탐색과 귀환
시 장은 거리의 활동에서 가까이 읽기로 리듬을 바꿉니다. “Mooring by Maple Bridge at Night”로 시작해 Zhang Ji와 Tang을 밝히고, 이전 및 다음 시 컨트롤과 표시된 1 / 4 위치를 제공합니다. 이어서 “Chant of the Evening River”로 향하는 탐색을 이어 가며, 시를 단일 인용문이 아닌 연속된 순서로 만듭니다.
변경 야간 투어 웹사이트가 보여 주는 것
제공된 아티팩트는 고정된 Three.js 장면의 전체 화면 캡처로 표현된 디자인 중심의 디지털 경험입니다. 캡처는 보이는 구성, 라벨, 장 순서, Fireworks와 선택한 강등 문장 같은 테스트 상태를 입증합니다. 그러나 그 자체로 백엔드 서비스, 예약, 지속적인 사용자 데이터 또는 프로덕션 플랫폼의 동작을 입증하지는 않습니다.
주요 디자인 과제는 분위기와 가독성의 균형입니다. 대형 에디토리얼 글자는 장을 기억에 남게 하고 느린 읽기 속도를 지원하지만, 시장 컨트롤과 시 카드처럼 밀도가 높은 영역은 계속 읽히도록 충분한 대비, 간격, 반응형 조정이 필요합니다. Day/night 전환과 다국어 컨트롤은 시각적으로 존재한다고 가정하지 말고 인터페이스 상태로 평가해야 합니다.
등불 발견 패널은 책임 있는 해석도 모델링합니다. 인용된 항저우 시가 변경에 관한 시가 아님을 명시하고, 강변의 단풍나무, 고기잡이 불빛, 배 위의 밤이라는 분위기를 위해 해당 운문을 제시합니다. 이 주석은 시적 연상을 보존하면서도 이를 지리적 증거로 제시하지 않습니다.
OpenDesign에서 변경 야간 투어 웹사이트 디자인을 만드는 방법
연속적인 장면 설정
물의 문, 무지개다리, 야시장, 물가의 시, 강등 피날레라는 다섯 장의 구도를 지원할 하나의 강변 도시 캔버스를 구축하세요. 장 표시기와 언어 컨트롤은 계속 유지하세요. 각 구도에 뚜렷한 주제가 있는지 확인하되, 강과 등불의 빛, 도시의 깊이가 이어지는 장면을 연결하도록 하세요.
제안된 프롬프트상상 속 역사 도시를 배경으로 한 다국어 야간 스토리 웹사이트를 만드세요. 다섯 개의 전체 화면 장인 물의 문, 무지개다리, 야시장, 물가의 시, 강등 피날레 뒤에 하나의 지속적인 Three.js 스타일 강변 장면을 사용하세요. 중국어, 영어, 일본어 컨트롤과 Day / Night 컨트롤, 장 번호, 대형 에디토리얼 제목, 간결한 로컬 인터랙션 영역을 포함하세요. 시장 선택지 네 가지—Tea Seller, Silk Shop, Iron Flowers, Fireworks—를 추가하고 Fireworks에는 변경된 로컬 메시지를 표시하세요. 네 가지 위치를 제공하는 시 읽기 도구를 추가한 뒤, 선택한 중국어 한 줄을 마지막 등불 상태로 가져가세요. 모든 역사는 실제 투어, 예약 흐름 또는 검증된 복원이 아닌 현대적 해석으로 다루세요. 동작 감소 설정에서도 보이는 텍스트를 읽을 수 있게 하고 백엔드 저장을 전제하지 마세요.
인터랙션 밀도 다듬기
분위기와 행동 사이의 균형을 시험하려면 시장 장을 사용하세요. 큰 제목 옆의 네 가지 컨트롤을 이해하기 쉽게 유지하고, 테스트한 Fireworks 응답이 전체 여정을 바꾸는 대신 해당 지역에 국한되어 눈에 띄게 나타나도록 하세요. 시 장에서는 장식적 크기가 시구를 가리지 않도록 제목, 저자 표시, 1 / 4 위치, 이전/다음 관계를 보여 주세요.
처음부터 끝까지 여정 점검
데스크톱과 좁은 화면에서 모든 장의 구도를 검토하세요. 언어 전환 시 현재 장이 유지되는지, 동작 감소 표시에서도 장면 맥락과 컨트롤을 읽을 수 있는지, 선택한 한 줄이 강등 피날레에 도달했을 때 식별 가능한지 확인하세요. 항저우 시에 대한 주석이 해당 인용문에 계속 연결되어 있는지, 아카이브 작품이 출처 자료로 명확히 제시되는지도 확인하세요.
내보내기 및 공유 링크 받기
완성된 디자인을 내보낸 다음, OpenDesign의 공유 기능을 사용하여 공유 링크를 받으세요. 별도의 브라우저 창에서 링크를 열고 의도한 버전과 해당 자산이 전송 전에 이용 가능한지 확인하세요.
채용 웹사이트 디자인
여덟 개의 달 장면으로 구성된 Kimi 채용 사례 연구로, 스크롤 연동 전환과 일러스트 지원 프로세스를 포함합니다.
웹사이트
크리에이티브 포트폴리오 웹사이트 디자인
Maya Rowan의 가상 포트폴리오는 프로젝트 카드, 실천 방식, 노트를 연결합니다.
웹사이트
산림 복원 웹사이트 디자인
인터랙티브 쓰러진 나뭇가지에서 숲의 현장 이야기, 복원 계획, 모의 참여 방법으로 이어지는 Second Spring을 살펴보세요.
웹사이트
훠궈 레스토랑 웹사이트 디자인
Yàn Huǒ는 가격이 표시된 시그니처 메뉴, 다이닝 갤러리와 방문 정보를 통해 예약 전에 훠궈를 소개합니다.
웹사이트