데스크톱 앱

섬 배경 FPS 게임 디자인

대담한 섬 타이틀 화면에서 시작해 박스형 상태 패널과 번호가 매겨진 무기 조작으로 1인칭 플레이에 들어가는 Harbor Skirmish를 만나보세요.

OpenDesign디자인 및 제작
공식
브라우저 게임 인터페이스4 화면
섬 배경 FPS 게임 디자인: 섬 개요 및 시작 화면
DeepSeek V4.1 Flash · 평가 예시스크린샷 1 중 4

LLM Arena 2026년 9월

케이스 노트
모델
DeepSeek V4.1 Flash
디자인 과제
움직임과 웨이브 전투가 가능한 섬 모험 게임 Harbor Skirmish를 만드세요.
결과물
데스크톱 앱

대상 분야

  • 브라우저 FPS 프로토타입작은 플레이 가능 세계와 그 전투 상태를 보여줍니다.
  • 전투 HUD 디자인체력, 탄약과 웨이브 정보를 분리해 읽기 쉽게 유지합니다.
  • 키보드 온보딩로컬 플레이 전과 플레이 중에 이동 단축키를 설명합니다.

주요 특징

  • 포스터 스타일의 타이틀 화면두꺼운 글자와 각진 버튼이 블록형 섬의 형태와 어울립니다.
  • 박스형 상태 패널크림색 배경이 변화하는 풍경과 전투 정보를 분리합니다.
  • 명시적인 시점 조작 대체 안내포인터 잠금을 사용할 수 없을 때 인터페이스에서 드래그를 제공합니다.

포스터 스타일 레터링을 적용한 섬 배경 FPS 게임 디자인

이 Harbor Skirmish 버전은 공중에서 본 섬 장면 위에 촘촘하게 배치된 외곽선 글자를 사용합니다. 제목, 노란색 Let’s Play 버튼과 작은 Welcome to Seabreeze 스트립이 왼쪽에 강한 수직 스택을 형성합니다. 시계탑, 등대, 여러 색상의 집과 계단은 오른쪽을 차지합니다. 각진 그래픽은 의도적으로 블록형으로 만든 건축물과 잘 맞습니다.

첫 화면에서 이미 네 가지 입력 방식을 제시합니다. WASD 이동, 마우스 조준 및 사격, 이중 점프와 그래플링입니다. How to play 펼침 영역은 시작 화면을 전체 페이지 설명서로 만들지 않고 더 긴 설명을 담을 수 있습니다. 사운드 및 전체 화면 조작은 주요 동작에서 떨어진 작은 사각형 버튼으로 유지됩니다.

전체 시작 화면은 외곽선 디스플레이 서체, 섬 개요와 간결한 조작 힌트 행을 결합합니다.
전체 시작 화면은 외곽선 디스플레이 서체, 섬 개요와 간결한 조작 힌트 행을 결합합니다.

고유한 배경을 가진 제목

크림색과 노란색 글자 채움, 어두운 외곽선과 어긋난 그림자가 질감 있는 물 위에서 제목을 분리합니다. 이 처리는 강렬하지만 실용적인 목적이 있습니다. 왼쪽 열 전체를 단색 패널에 배치하지 않고도 움직이는 장면 위에서 단어를 알아볼 수 있게 합니다.

초대의 역할을 하는 건축

계단, 지붕선과 중앙의 높은 탑은 수직 이동을 시작 화면 이미지의 일부로 만듭니다. 가까이에 있는 Streets below. Rooftops above. 문구는 같은 관계를 가리킵니다. 스크린샷은 이러한 초대를 보여줄 수 있지만, 각 지붕이 플레이 가능한 목적지인지 확인하려면 별도의 이동 테스트가 필요합니다.

진입 전의 키캡

짧은 입력 행은 플레이 버튼 바로 아래에 놓입니다. 이는 키보드 사용자가 장면에 들어가기 전에 예상되는 상호작용을 즉시 이해하게 합니다. 터치 우선 방식으로 바꾸려면 이 행을 단순히 축소하는 대신 다른 주요 조작 설명이 필요합니다.

박스형 패널에서 체력, 탄약과 웨이브 상태 읽기

플레이 인터페이스는 정보를 화면 가장자리 주변에 분산합니다. 어두운 테두리가 있는 크림색 패널에 점수, 웨이브 상태, 체력과 탄약을 표시합니다. 중앙의 위치 라벨은 화면 위쪽에 놓입니다. 세계 위에 직접 그린 글자와 달리 이 상자는 뒤로 벽이나 구름이 지나가도 자체 배경을 유지합니다.

그 대가로 게임을 둘러싼 프레임이 더 두드러집니다. 각 상자가 보이는 장면의 일부를 없애므로 패널 크기와 모서리 배치가 중요합니다. 번호가 매겨진 무기 행은 하단 중앙 가까이에 배치해 그 위쪽에 조준과 환경 읽기를 위한 비교적 넓은 영역을 남깁니다.

Scattergun을 선택한 뒤의 완전한 게임 상태로, 해당 무기 슬롯과 탄약 패널 및 주변 HUD를 보여줍니다.
Scattergun을 선택한 뒤의 완전한 게임 상태로, 해당 무기 슬롯과 탄약 패널 및 주변 HUD를 보여줍니다.
관찰된 상태 관계
요소관찰된 관계디자인 결과
위치와 속도입력 확인 중 위치가 Seabreeze Streets에서 Market Square로 변경되었습니다.지역 이름을 지정하면 속도 숫자만으로는 제공할 수 없는 방향 감각을 더할 수 있습니다.
무기와 탄약처음 표시된 Ink Rifle 탄약은 24 / 168이었고, Scattergun을 선택하자 6 / 30으로 변경되었습니다.선택은 도구 이름과 탄약 맥락 모두에 영향을 줍니다.
체력과 대시체력 및 Q 대시 동작에 각각 별도의 바가 표시됩니다.생존과 이동 가능 여부를 설명 없이 하나의 진행 바에 함께 표시해서는 안 됩니다.

키보드 입력, 시점 조작과 일시정지 처리

이 소스는 브라우저 특유의 문제를 예상합니다. 포인터 잠금을 사용하지 못할 수 있다는 점입니다. 검사한 브라우저에서 인터페이스는 클릭 앤 드래그 대안을 표시했습니다. 이는 페이지가 로드된 상태와 플레이어가 주변을 둘러볼 수 있는 상태가 다르다는 구체적인 차이입니다. 이 안내는 숨겨진 도움말 패널에만 두지 말고 활성 장면 옆에 배치해야 합니다.

일시정지 화면은 긴 조작 안내를 모으고, 재개와 섬 시작 화면으로 돌아가기를 분리합니다.
일시정지 화면은 긴 조작 안내를 모으고, 재개와 섬 시작 화면으로 돌아가기를 분리합니다.
  1. 사용 가능한 조작 경로로 장면에 진입하기

    Let’s Play는 공중 시점의 타이틀 화면을 거리 높이의 카메라와 HUD로 교체합니다. 짧은 웨이브 알림이 플레이를 시작합니다. 시점 조작 안내가 동시에 나타난다면 두 가지 유용한 메시지가 서로를 가리지 않도록 배치와 표시 시간을 세심하게 조정해야 합니다.

  2. 두 곳에서 선택 상태를 보이기

    숫자 키로 라이플, 산탄총 또는 블레이드를 선택합니다. 행은 활성 슬롯을 강조하고, 탄약 패널은 선택한 무기 이름을 다시 표시합니다. 이러한 반복은 의도된 것입니다. 단축키 그룹은 도구를 바꾸는 방법을 설명하고, 모서리 패널은 현재 사용할 준비가 된 도구를 설명합니다.

  3. 고급 이동을 설명하는 공간으로 일시정지 활용하기

    일시정지 화면에는 해당 키와 함께 달리기, 이중 점프, 대시, 슬라이드, 그래플, 조준과 재장전이 나열됩니다. Resume이 주요 버튼이고 더 작은 섬 복귀 동작이 함께 있습니다. 확장된 키 목록을 이곳에 배치하면 플레이어가 장면을 계속 탐색하지 않고도 내용을 읽을 수 있습니다.

이 브라우저 FPS 예시의 범위와 한계

로컬 게임 시작, 이동 입력 전송, 무기 전환과 일시정지 열기를 검사했습니다. 표시된 숫자는 벤치마크 결과가 아니라 임시 세션 값입니다. 이 검토만으로는 전체 레벨 도달 가능성, 전투 밸런스 또는 기기별 성능을 확정할 수 없습니다. 멀티플레이어 또는 영구 계정 시스템은 검증하지 않았으며, 평가 모델 토큰은 제공된 파일명에서 가져온 것입니다.

OpenDesign에서 섬 배경 FPS 게임 디자인을 만드는 방법

  1. OpenDesign 다운로드 및 설치

    데스크톱 앱을 다운로드하여 설치하고 설정을 완료하세요. 디자인을 위한 프로젝트를 만드세요.

    OpenDesign 다운로드
  2. 세계와 정보 프레임 지정하기

    식별 가능한 랜드마크가 있는 작은 섬을 설명한 다음 HUD를 별도로 정의하세요. 어떤 값에 안정적인 패널 배경이 필요한지, 어떤 값은 장면 위에 직접 표시해도 되는지 결정하세요. 이렇게 하면 시작 포스터 스타일이 모든 전투 라벨을 압도하는 것을 막을 수 있습니다.

    제안된 프롬프트

    Harbor Skirmish라는 가상의 로컬 브라우저 게임을 위한 섬 배경 FPS 게임 디자인을 만드세요. 시계탑, 등대, 계단과 서로 연결된 지붕선이 있는 다채로운 로우 폴리 해변 마을을 사용하세요. 두꺼운 크림색 및 노란색 외곽선 글자, 노란색 플레이 버튼과 간결한 키보드 힌트가 있는 공중 시점의 시작 화면을 구성하세요. 1인칭 플레이 중에는 점수와 웨이브 정보를 화면 상단 모서리의 별도 패널에 배치하고, 체력과 대시 상태는 왼쪽 아래에, 현재 무기와 탄창 및 예비 탄약은 오른쪽 아래에 배치하세요. 하단 중앙을 따라 번호가 매겨진 무기 슬롯 3개를 추가하세요. 읽기 쉬운 키보드 안내, Resume 버튼과 별도의 시작 화면 복귀 동작이 있는 일시정지 화면을 추가하세요. 포인터 잠금을 사용할 수 없을 때는 명확한 안내를 제공하세요. 점수는 세션 내에서만 유지하고 멀티플레이어 또는 계정 기능을 만들어내지 마세요.

  3. 관련 값을 하나의 상태로 함께 확인하기

    라이플에서 산탄총으로 전환하고 강조 표시, 무기 이름과 탄약을 함께 확인하세요. 이름이 있는 두 지역 사이를 이동하며 위치 라벨을 점검하세요. 직접 확인한 테스트 결과와 전체 맵 또는 전투 시스템에 대한 가정을 분리하세요.

  4. 임시 알림에 고유한 공간 부여하기

    포인터 잠금이 있을 때와 없을 때의 첫 진입을 테스트하세요. 웨이브 알림과 조작 대체 안내가 서로 겹쳐서는 안 됩니다. 그런 다음 일시정지를 열고 지원되는 최소 데스크톱 뷰포트에서도 긴 안내를 읽을 수 있는지 확인하세요.

  5. 내보내기 및 공유 링크 받기

    완성된 디자인을 내보낸 다음, OpenDesign의 공유 기능을 사용하여 공유 링크를 받으세요. 별도의 브라우저 창에서 링크를 열고 의도한 버전과 해당 자산이 전송 전에 이용 가능한지 확인하세요.

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원