YoRHa: Nier Automata — YoRHa 인터페이스 빌드 쇼케이스: 인터랙티브 안드로이드 인터페이스 체험 | 온라인 플레이

YoRHa: Nier Automata — YoRHa 인터페이스 빌드 쇼케이스: 인터랙티브 안드로이드 인터페이스 체험 | 온라인 플레이

최종 결과물: YoRHa 인터페이스 빌드 쇼케이스

YoRHa 인터페이스 빌드 쇼케이스는 YoRHa — 2B, 9S, A2가 따르는 궤도 안드로이드 지휘 체계 — 의 인터페이스 언어를 브라우저에서 재구성한 것입니다. 정적인 목업이 아닙니다. 페이지를 불러오면 인터페이스는 여전히 만들어지는 중입니다: 자율 커서가 화면을 가로질러 날아다니며 각 요소 주위에 상자를 그리고, 이름을 붙이고, 한 단계씩 드러냅니다. 먼저 배경과 조명, 그다음 스캔 필드와 캐릭터 스프라이트, 그다음 헤드업 디스플레이, 신호 모니터, 인증 알약, 대화 시스템, 스토리 텍스트, 마지막으로 선택지 목록입니다.

마지막 패널이 자리를 잡으면 작동하는 YoRHa 단말이 남습니다: 구조 신호 목표, 화자 표시판과 페이지 표시기가 있는 고정폭 통신 로그, 세 개의 번호가 매겨진 결정, 그리고 다음 행동을 직접 적을 수 있는 자유 행동 필드입니다. 애시 화이트, 가느다란 검은 테두리, 끊임없이 흐르는 스캔라인이 차갑고 고요하며 틀림없이 안드로이드다운 분위기를 유지합니다 — 원래 인터페이스를 잊을 수 없게 만든 바로 그 절제입니다.

지금 플레이하기: 라이브 YoRHa 인터페이스 열기 →

특징

  • 스스로 조립되는 인터페이스 — 모든 헤드업 디스플레이 레이어는 단계별 빌드 과정을 통해 눈앞에서 그려집니다: 상자 그리기, 스캔라인, 팝, 패널, 타자기 효과가 각각 ui.hud(), ui.signal_monitor, ui.dialogue_system 같은 자체 런타임 컴포넌트 이름으로 표시됩니다.
  • 정통 YoRHa 시각 언어 — 애시 화이트 패널, 가느다란 검은 테두리, 강한 오프셋 그림자, 단색 활자를 흐르는 스캔 필드가 하나로 묶습니다. 원래 안드로이드 운영 체제의 절제를 살아 있는 웹 페이지로 다시 만든 것입니다.
  • 전술 무대와 스프라이트 조명 — 자체 스캔 필드가 있는 회색조 폐허 배경과 드롭 섀도 연출이 전신 캐릭터 스프라이트를 중앙에 두고, 읽기 쉽게, 지휘 표시 판독값처럼 프레이밍합니다.
  • 통신 로그 대화 시스템 — 화자 표시판, 한 글자씩 써 내려가는 고정폭 스토리 텍스트, 깜빡이는 다음 프롬프트, 1/3 페이지 표시기입니다. Pod 042의 목소리로 말하는 고전적인 어드벤처 게임 대화 블록입니다.
  • 분기 선택지 목록 — 번호가 매겨진 결정 열(01–03)이 블랙박스 구조 신호를 플레이 가능한 비주얼 노벨 장면으로 구성하며, 연결하는 어떤 내러티브 엔진이든 구동할 준비가 되어 있습니다.
  • 자유 행동 입력 — 다음 행동을 직접 입력하고, 이미지 연산을 켜고 끄며, 확정 버튼으로 제출하세요. 인터페이스가 플레이어에게 제어권을 되돌려줄 때 사용하는 바로 그 필드입니다.
  • 설치 없는 브라우저 런타임 — 빌드 단계도 다운로드도 없는 순수 HTML, CSS, JavaScript. 링크를 열면 단말이 스스로 부팅됩니다.

인터페이스

제작 과정

1단계: 세계 구축claude-opus-5
단 한 문장이 YoRHa: Nier Automata 세계를 만들어냅니다 — 7명의 캐릭터(2B, 9S, A2, 사령관 화이트, 파스칼, 아담, 이브)를 다루는 원자 카드 25개, 8개의 장소(벙커, 도시 폐허, 저항군 캠프, 기계 마을, 유원지 폐허, 숲의 왕국, 복제 도시, 탑), 3개의 사건, 4개의 설정 항목, 3개의 비밀이 각각 자체 커버 아트와 함께 제공됩니다.
2단계: 자산 생성gpt-image-2
전신 캐릭터 원본, 16:9 런타임 배경, 커버 키 아트를 GPT Image 2로 생성합니다. 그런 다음 캐릭터 원본을 BiRefNet으로 배경 제거하여 잔여 배경이 없는 깨끗한 투명 이미지로 만들고, 무대에 스프라이트 세트를 제공합니다.
3단계: 인터페이스 구축과 게시claude-opus-5
YoRHa 헤드업 디스플레이 — 헤더 바, 제품 배지, 신호 모니터, 인증 알약, 전술 무대, 선택지 목록, 통신 로그, 페이지 표시기, 자유 행동 입력 — 를 정적인 HTML, CSS, JavaScript 앱으로 조립하고, 컴포넌트별 라벨이 붙은 단계별 빌드 애니메이션에 연결한 뒤 공개 플레이 링크와 함께 게시합니다.

자산 프롬프트

자산 프롬프트

인터페이스 목업 프롬프트gpt-image-2
"스타일 확정을 위한 16:9 비주얼 노벨 인터페이스 목업을 만들어 주세요. 주제: 9S 1인칭 시점에서 바라본, 비극적 공상과학 로맨스 어드벤처 게임을 위한 손상된 YoRHa 정보 단말 인터페이스. 구성: 아래쪽에 반투명 전술 대화 상자가 있는 빈 배경 레이어, 오른쪽 위에 진실 동기화, 신뢰, 경보 상태 위젯, 은은한 선택지 버튼, 캐릭터 없음, 크게 읽히는 저작권 로고 없음. 스타일: 검정, 흰색, 애시 그레이, 은은한 금색 가느다란 테두리, 옅은 파란색 스캔 그리드, 작은 붉은색 오류 코드 포인트, 포스트 아포칼립스 공상과학 헤드업 디스플레이, 우아한 고딕 군사적 절제, 손상된 기억 아카이브. 텍스트: 최소한의 일반 인터페이스 라벨만, 길게 읽히는 문단은 피할 것. 제약: 워터마크 없음, 실제 브랜드 로고 없음, 잡동사니 없음, 캐릭터 스프라이트를 위해 중앙은 비워 둘 것."
스프라이트 프롬프트(2B)gpt-image-2
"@2B / YoRHa No.2 Type B, 비주얼 노벨 런타임용 3:4 컷아웃 친화적 캐릭터 스프라이트 원본을 만들어 주세요. 주제: 무릎까지 나오는 전신으로 서 있는 2B, 절제된 슬픈 표정, 검 손잡이 근처에 둔 한 손, 공격 동작 없음, 9S가 바라보는 것처럼 관찰자 쪽으로 살짝 향한 자세. 구성: 중앙에 캐릭터, 단순한 밝은 회색 이음새 없는 배경, 잘림 없이 전체 실루엣이 보임, 텍스트 없음. 스타일: 차가운 게임 콘셉트 아트와 섬세한 비극 로맨스 원화, 검은 고딕 전투복, 흰 단발머리, 전술 바이저, 가느다란 실루엣, 단색 검정 흰색 회색의 은은한 금색 디테일. 제약: 배경 제거를 위한 단순 배경, 다른 캐릭터 없음, 워터마크 없음, 로고 없음, 유혈 없음, 투명 배경 컷아웃을 위해 가장자리를 깔끔하게 유지."
배경 프롬프트(도시 폐허)gpt-image-2
"비주얼 노벨 런타임용 16:9 깨끗한 배경을 만들어 주세요. 장면: 비 온 뒤 황혼의 포스트 아포칼립스 폐허 도시, 식생으로 갈라진 버려진 콘크리트 탑들, 부서진 고가 도로, 멀리 달빛 안개, 전경 근처에 작은 흰 꽃 한 무리, 캐릭터 없음. 구성: 와이드 샷, 차분하고 읽기 쉬운 중경, 대화 인터페이스에 적합한 비어 있는 하단 3분의 1, 중앙은 너무 복잡하지 않게, 영화 같은 깊이. 스타일: 차가운 NieR풍 포스트 아포칼립스 공상과학 게임 콘셉트 아트 분위기, 애시 그레이, 흰색, 검정, 은은한 금색 하이라이트, 먼지와 안개, 우울하고 외로움. 텍스트: 텍스트 없음. 제약: 사람 없음, 전경에 로봇 없음, 워터마크 없음, 로고 없음, 런타임에 적합한 깨끗한 배경."
배경 프롬프트(벙커 지휘 갑판)gpt-image-2
"비주얼 노벨용 16:9 깨끗한 런타임 배경을 만들어 주세요. 장면: 지구 상공의 궤도 안드로이드 군사 지휘 갑판, 차가운 검정 흰색 회색 내부, 매달린 데이터 패널, 달 방송 단말, 캐릭터 없음, 로고 없음. 구성: 와이드 샷, 대화 인터페이스를 위해 하단 3분의 1과 중앙이 읽기 쉬움, 강한 깊이, 절제된 고딕 공상과학 기하학. 스타일: 손상된 YoRHa 정보 단말 세계, 은은한 금색 가느다란 조명, 옅은 파란색 모니터 광, 외롭고 포스트 아포칼립스적인 군사 분위기. 텍스트: 텍스트 없음. 제약: 읽히는 로고 없음, 사람 없음, 워터마크 없음, 런타임에 적합한 깨끗한 배경."
배경 프롬프트(유원지 폐허)gpt-image-2
"비극적 공상과학 비주얼 노벨용 16:9 깨끗한 런타임 배경을 만들어 주세요. 장면: 기계 생명체가 인간을 흉내 내 지은 버려진 유원지 결혼식 무대, 부서진 회전목마 조명, 종이꽃, 갈라진 통로, 으스스한 예배당 아치, 읽히는 텍스트 없음, 전경 캐릭터 없음. 구성: 대화 인터페이스를 위한 깨끗한 하단 3분의 1이 있는 와이드 샷. 스타일: 포스트 아포칼립스 기계의 우울, 애시 그레이와 차가운 흰색에 은은한 축제 분위기, 먼지와 부패. 텍스트: 텍스트 없음. 제약: 워터마크 없음, 로고 없음."
배경 프롬프트(복제 도시)gpt-image-2
"비주얼 노벨용 16:9 깨끗한 런타임 배경을 만들어 주세요. 장면: 하얀 복제 도시, 텅 빈 인공 인간 도시 껍데기, 극도로 미니멀한 기하학적 건물, 광택 나는 흰 석재, 끝없는 옅은 공허, 희미한 검은 균열과 데이터 노이즈, 캐릭터 없음. 구성: 대화 인터페이스를 위한 깨끗한 하단 3분의 1이 있는 와이드 샷, 강한 원근 소실점. 스타일: 임상적인 공상과학 미니멀리즘, 흰색과 옅은 회색에 검은 가느다란 균열, 조용하고 불안함. 텍스트: 텍스트 없음. 제약: 사람 없음, 워터마크 없음, 로고 없음, 런타임에 적합한 깨끗한 배경."

왜 네타 스튜디오인가

전문성 — 클라우드 하네스 시스템이 세계 구축부터 자산 생성, 게시까지 전체 워크플로를 지원하며, 모두 클라우드에서 실행되어 로컬 설정이 필요 없습니다. 최신 모델에 안정적으로 접근: Claude Opus 5, GPT Image 2, DeepSeek V3.

원클릭 생성 — 공식적으로 튜닝된 스킬이 모든 단계를 이끕니다: 세계 구축, 캐릭터 디자인, 아트 생성, 스프라이트 컷아웃, 패키징. 세계 포크 리소스 공유가 기본 내장되어 있습니다.

커뮤니티 우선 — 사용자는 무제한으로 세계를 만들 수 있고, 모든 공개 세계는 포크, 리믹스, 재해석될 수 있습니다.

스튜디오 내부

창작 시작하기

이 인터페이스는 네타 스튜디오 인공지능이 단 한 문장에서 생성했습니다. 세계는 몇 분, 자산은 몇 분, 빌드는 몇 분이면 완성되었습니다. 당신도 할 수 있습니다 — 이 세계를 각색하거나 어떤 원작에서든 새로 시작하세요. 코딩은 필요 없고, 무료로 시작할 수 있습니다.

세계: YoRHa: Nier Automata유형: 인터랙티브 인터페이스 · 웹 체험원자 카드 25개 · 스프라이트 3개 · 장소 8개 · 커버 1개공유: 열기 →
×