데스크톱 앱

섬 어드벤처 게임 디자인

옥상 이동 경로, 무기 슬롯 3개와 경쾌한 1인칭 인터페이스를 갖춘 작은 해변 섬 Harbor Skirmish를 살펴보세요.

OpenDesign디자인 및 제작
공식
브라우저 게임 인터페이스4 화면
섬 어드벤처 게임 디자인: 섬 개요 및 시작 화면
GPT 6 Astra · 평가 예시스크린샷 1 중 4

LLM Arena 2026년 9월

케이스 노트
모델
GPT 6 Astra
디자인 과제
이동과 웨이브 전투를 지원하는 플레이 가능한 섬 어드벤처 Harbor Skirmish를 제작하세요.
결과물
데스크톱 앱

적합한 활용 분야

  • 브라우저 게임 프로토타입플레이 가능한 장면을 시작 및 일시 정지 상태와 연결합니다.
  • 1인칭 인터페이스화면 주변에 이동, 체력과 무기 정보를 배치합니다.
  • 게임 시작 화면모든 키보드 명령을 나열하지 않고 배경과 무대를 소개합니다.

주요 특징

  • 전투 전에 만나는 섬시작 화면에서 거리, 옥상과 주변 바다를 보여 줍니다.
  • 중앙이 열린 HUD상태 정보를 가장자리에 배치해 조준 시야를 확보합니다.
  • 경쾌한 일시 정지 상태기울어진 카드가 플레이 중단을 시각적 정체성의 일부로 바꿉니다.

해변 시작 화면을 갖춘 섬 어드벤처 게임 디자인

Harbor Skirmish는 플레이어를 거리에 배치하기 전에 위에서 내려다본 모습으로 배경을 소개합니다. 시작 화면 왼쪽은 제목이 채우고 오른쪽에는 섬이 자리합니다. 다채로운 지붕, 시계탑과 해안가를 한 화면에서 볼 수 있습니다. 이를 통해 1인칭 카메라로 전환되어 전체 조망을 볼 수 없게 되기 전에 플레이어가 장소의 모습을 파악할 수 있습니다.

크림색, 노란색과 짙은 녹색을 사용한 인터페이스는 군사용 대시보드보다 인쇄된 휴양지 포스터에 가깝게 느껴집니다. 짧은 도입부는 제멋대로 날뛰는 토끼의 침공을 설명하며, 이어서 눈에 잘 띄는 Let’s Play 버튼이 명확한 다음 동작 하나를 제시합니다. 시작 화면에는 기본 이동 및 조준 힌트가 표시되고, 추가 안내는 주요 초대 문구와 분리되어 있습니다.

완성된 시작 화면은 제목 및 플레이 동작과 시브리즈섬을 높은 곳에서 바라본 전경을 함께 보여 줍니다.
완성된 시작 화면은 제목 및 플레이 동작과 시브리즈섬을 높은 곳에서 바라본 전경을 함께 보여 줍니다.

지도 패널 없는 지도

높은 곳에서 내려다본 섬 전경은 별도의 도표를 추가하지 않고 거리와 옥상의 관계를 설명합니다. 탑과 빽빽하게 모인 지붕은 지상에서도 알아볼 수 있는 형태를 제공합니다. 이는 배경을 소개하는 유용한 방식이지만, 눈에 보이는 모든 지붕에 올라갈 수 있다는 의미는 아닙니다.

강력한 시작 동작 하나

Let’s Play는 이후 선택된 무기를 나타내는 것과 동일한 노란색을 사용합니다. 기울어진 형태와 오프셋 테두리는 차분한 바다를 배경으로 버튼을 돋보이게 합니다. 주변 텍스트가 충분히 짧아 버튼이 완전한 조작 설명서와 시각적으로 경쟁하지 않아도 됩니다.

계속 이어지는 그래픽 언어

작은 Harbor Skirmish 마크는 플레이 중에도 화면 모서리에 유지됩니다. 크림색 키캡, 녹색 레이블과 따뜻한 강조색도 HUD와 일시 정지 카드에 다시 사용됩니다. 따라서 공중 시점 장면에서 1인칭 장면으로 전환되더라도 무관한 인터페이스 스타일이 새로 등장하지 않습니다.

섬 풍경을 중심으로 1인칭 HUD 구성하기

플레이 중에는 화면 중앙이 주로 거리와 조준 기준점에 할당됩니다. 점수는 왼쪽 상단 쪽에, 웨이브와 남은 적은 오른쪽 상단 쪽에, 위치와 속도는 상단 중앙 부근에 표시됩니다. 체력과 대시 상태는 왼쪽 하단에, 무기와 탄약은 오른쪽 하단에 배치됩니다.

이 정보의 상당 부분은 무거운 패널 안이 아니라 장면 위에 직접 표시됩니다. 덕분에 섬이 계속 보이지만, 각 레이블의 대비는 뒤에 놓이는 건물, 하늘 또는 지면에 따라 달라집니다. 하단의 크림색 조작 영역은 반대 방식을 택합니다. 정확한 판독이 중요한 작은 키 레이블에 일관된 배경을 제공합니다.

전체 1인칭 화면은 가장자리에 정렬된 상태 및 조작 정보 그룹 사이로 거리가 보이게 유지합니다.
전체 1인칭 화면은 가장자리에 정렬된 상태 및 조작 정보 그룹 사이로 거리가 보이게 유지합니다.
서로 다른 세 가지 게임플레이 피드백
표시 항목전달하는 내용구분이 중요한 이유
점수 및 웨이브현재 로컬 플레이 세션 내 진행 상황세션 점수는 모델 평가 점수나 저장된 기록이 아닙니다.
체력 및 Dash Ready생존 상태와 사용 가능한 이동 동작대시 레이블은 업적이 아니라 사용 가능 여부를 설명합니다.
무기 이름 및 탄약선택된 도구와 화면에 표시되는 탄약 수치강조 표시만 바뀌는 것이 아니라 활성 슬롯에 맞춰 이름도 변경되어야 합니다.

무기 전환 및 일시 정지에서 복귀하기

번호가 매겨진 슬롯 3개는 Ink Rifle, Scattergun, Paper Blade로 계속 표시됩니다. 2를 선택하면 활성 슬롯과 무기 이름이 Scattergun으로 변경됩니다. 이중 피드백은 테두리만 변경하는 것보다 더 많은 정보를 제공합니다. 단축키 위치와 탄약 표시 옆에서 선택 항목을 모두 식별해 주기 때문입니다.

일시 정지 카드는 현재 점수를 유지하고, 계속하기 동작을 강조하며 추가 이동 안내를 한곳에 모읍니다.
일시 정지 카드는 현재 점수를 유지하고, 계속하기 동작을 강조하며 추가 이동 안내를 한곳에 모읍니다.
  1. 맥락 속에서 이동 방법 익히기

    WASD, 스윙, 점프와 슬라이드 힌트는 실시간 장면 하단 가까이에 배치됩니다. 별도의 Hold E to Grapple 안내는 중앙에 더 가깝습니다. 이러한 구분은 일반 조작법을 계속 확인할 수 있게 하면서 이동 메커니즘에 더 국지적인 안내를 제공합니다. 다만 여러 힌트가 동시에 표시되면 여전히 장면과 시각적으로 경쟁할 수 있습니다.

  2. 배경과의 연결을 잃지 않고 일시 정지하기

    Escape를 누르면 흐리게 처리된 거리 위로 크림색 카드 Island time이 열립니다. 현재 점수는 카드 안에 계속 표시됩니다. 아래의 장면을 여전히 알아볼 수 있으므로, 플레이 중단이 별도의 설정 페이지로 이동하는 것보다 현재 세션에 연결된 상태처럼 느껴집니다.

  3. 재개와 나가기 구분하기

    Back to It은 큰 노란색 동작이며, Back to the island는 더 작고 밑줄이 그어진 대안입니다. 두 문구가 비슷한 표현을 공유하므로 차이를 세심하게 확인해야 합니다. 시각적 위계는 계속하기 동작을 식별하는 데 도움이 되지만, 이 경험에 익숙하지 않은 사용자에게는 더 직관적인 레이블이 모호성을 줄여 줄 수 있습니다.

이 로컬 게임 예시가 보여 주는 것

제공된 내보내기 파일에는 로컬 싱글 플레이어 게임과 렌더링된 3D 환경이 포함되어 있습니다. 시작, 무기 선택 변경과 일시 정지 상태 열기를 확인했습니다. 이 갤러리는 성능 벤치마크나 완료된 전체 플레이 기록이 아니며, 모든 이동 메커니즘이 모든 기기에서 작동한다는 증거도 아닙니다. 온라인 멀티플레이, 계정 서비스 또는 저장된 순위표는 확인되지 않았습니다. 모델 레이블은 제공된 파일 이름에서 그대로 유지했습니다.

OpenDesign에서 섬 어드벤처 게임 디자인을 만드는 방법

  1. OpenDesign 다운로드 및 설치

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

    OpenDesign 다운로드
  2. 시작 화면과 플레이 화면을 함께 디자인하기

    작은 섬 하나와 두 가지 카메라 상태로 시작하세요. 개요 화면과 거리 시점 화면 모두에서 주요 랜드마크가 보이도록 유지하세요. 무기나 환경의 세부 요소를 추가하기 전에 지속적으로 표시되는 인터페이스의 색상을 정의하세요.

    제안된 프롬프트

    Harbor Skirmish라는 가상의 브라우저 게임을 위한 섬 어드벤처 게임 디자인을 제작하세요. 시작 화면에는 다채로운 해변 섬을 위에서 내려다본 모습을 보여 주고, 왼쪽에는 큰 제목과 노란색 ‘플레이하기’ 버튼 하나를 배치하세요. 크림색 표면, 짙은 녹색 레이블, 오프셋 테두리와 절제된 기울임 카드 디자인을 사용하세요. 1인칭 거리 장면으로 진입하면 상단에 점수와 웨이브 정보, 왼쪽 하단에 체력과 대시 상태, 오른쪽 하단에 무기와 탄약을 표시하세요. 잉크 라이플, 산탄총, 종이 칼날을 위한 번호가 매겨진 슬롯 3개를 유지하세요. 현재 점수, 기본 재개 동작과 별도의 시작 화면 복귀 동작이 있는 일시 정지 카드를 추가하세요. 로컬 세션 상태만 사용하고 멀티플레이, 저장된 점수 또는 계정 연결이 있는 것처럼 표현하지 마세요. 키보드 조작법을 표시하고 장면 중앙을 가리지 마세요.

  3. HUD 전체에서 하나의 선택 상태 추적하기

    각 무기를 선택하고 슬롯, 이름과 탄약 표시를 함께 확인하세요. 그런 다음 해당 선택 상태에서 일시 정지했다가 재개하세요. 유용한 테스트 기준은 각 요소가 개별적으로 그럴듯해 보이는지가 아니라 인터페이스가 하나의 일관된 상태를 설명하는지 여부입니다.

  4. 하늘 이외의 배경에서도 대비 확인하기

    옅은 벽, 어두운 지붕과 거리 표면을 배경으로 상태 레이블을 살펴보세요. 장면의 탁 트인 느낌은 유지하되, 작은 텍스트에는 필요한 경우 절제된 배경을 추가하세요. 색상에만 의존하지 않고도 일시 정지 동작을 구분할 수 있는지 확인하세요.

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

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

OpenDesign 데스크톱

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

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

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

macOS, Windows 지원