모바일 앱

해양 컬렉션 앱 디자인

어비설 로그는 해양 표본 컬렉션을 잠수 미션과 연결합니다. 각각의 미확인 기록에는 이를 공개하기 위한 과제와 남은 진행도가 설명되어 있습니다.

OpenDesign디자인 및 제작
공식
심해 발견 및 수집4 화면
해양 컬렉션 앱 디자인: 현재 표본 및 발견 카드 해양 컬렉션 앱 디자인: 잠수 미션 및 발견 조건
현재 표본 및 발견 카드 · 잠수 미션 및 발견 조건

LLM Arena 2026년 9월

케이스 노트
모델
Claude Opus 5
디자인 과제
심해 생물 카드 컬렉션 앱
결과물
모바일 앱

적합한 용도

  • 표본 컬렉션 앱시각적 카탈로그를 유용한 발견 기록과 연결합니다.
  • 미션 기반 인터페이스항목을 이용할 수 있게 되기까지 남은 과정을 보여줍니다.
  • 모바일 학습 제품발견 데이터를 더 긴 참고 정보와 구분합니다.

주요 특징

  • 대표 표본하나의 이미지에서 희귀도, 발견 수심 및 목격 시간으로 이어집니다.
  • 두 가지 탐색 방식해역과 희귀도를 기준으로 동일한 컬렉션을 정리합니다.
  • 측정 가능한 잠수 미션정지 유지 횟수, 통과 횟수 및 표본 수를 통해 각 과제의 진행도를 구체적으로 보여줍니다.
  • 명시적인 잠금 해제 조건미확인 기록에는 미션과 아직 필요한 작업이 명시됩니다.

각 발견을 설명하는 해양 컬렉션 앱

어비설 로그는 작은 카드가 빽빽한 화면 대신 대표 표본으로 시작합니다. 캡처된 상태에서는 아톨라해파리 아래에 학명, 희귀도, 발견 수심 및 최초 목격 타임스탬프가 표시됩니다. 이러한 정보 아래에는 View record 및 Dive 버튼이 있습니다. 한 액션은 현재 항목의 정보를 더 자세히 보여주고, 다른 액션은 컬렉션을 확장하는 과제로 이어집니다.

헤더에는 11 / 18개 기록됨으로 표시되며, 아래 컬렉션에는 발견된 생물과 Unknown 항목이 모두 포함됩니다. 따라서 이 페이지는 컬렉션이 완성되기 전부터 전체 규모를 보여줍니다. 미확인 카드는 단순히 장식용 실루엣에 그치지 않습니다. 미션과 남은 조건을 명시하여 미완성 기록에 실용적인 역할을 부여합니다.

완전한 아톨라해파리 대표 화면에는 표본 이미지, 희귀도, 발견 수심, 목격 시간, 기록 및 잠수 액션이 표시됩니다.
완전한 아톨라해파리 대표 화면에는 표본 이미지, 희귀도, 발견 수심, 목격 시간, 기록 및 잠수 액션이 표시됩니다.

발견 데이터와 참고 정보를 구분하기

대표 카드와 전체 기록은 동일한 대상을 다루지만 서로 다른 질문에 답합니다. 카드는 이번 발견을 요약합니다. 기록에는 운용 장비 레이블, 수심 범위, 크기 및 설명이 추가됩니다. 이러한 구분은 개별 관찰 정보와 일반적인 종의 특성을 혼동해서는 안 되는 필드 가이드 디자인에 특히 유용합니다.

아톨라해파리 기록에 있는 필드별 역할
필드캡처된 예시인터페이스에서의 역할
발견 수심1,560 m이 기록에 연결된 예시 목격 정보를 설명합니다.
수심 범위1,000–4,000 m이번 한 건의 발견 수심이 아니라 더 폭넓은 참고 범위를 제공합니다.
최초 목격2025년 8월 11일 · 21:33데모 기록이 생성된 시점을 나타냅니다.
운용 장비ROV 벤타나표본의 정체성을 바꾸는 대신 예시 목격 정보에 맥락을 더합니다.
크기종 모양 몸체 약 15 cm명시적인 단위와 함께 별도 유형의 참고 정보를 제공합니다.

미확인 표본을 실행 가능한 미션으로 전환하기

Expeditions 화면에는 진행 단위가 서로 다른 7개의 과제가 있습니다. Twilight zone station hold 미션은 이미 정지 유지 3 / 3회에 도달했으며 Complete and unlock을 제공합니다. Large cephalopod sonar trace 미션은 통과 5 / 6회에 도달했으며 Log a dive · +1을 제공합니다. 두 액션의 차이 덕분에 사용자가 탭하기 전에 다음 단계를 알 수 있습니다.

이러한 단위는 중요합니다. 정지 유지 3회, 통과 6회 및 프로파일 5회는 서로 바꿔 쓸 수 있는 진행 포인트가 아닙니다. 과제명을 명시하고 해당 단위를 유지함으로써 인터페이스는 진행률 표시줄에 이해하기 쉬운 의미를 부여합니다. 측정 완료와 기록 잠금 해제 역시 별개의 상태입니다. 준비된 과제에서도 방문자는 여전히 발견 항목을 획득해야 합니다.

전체 미션 화면은 조건을 충족한 과제와 아직 진행 중인 과제를 대비해 보여주며, 각 미션의 단위와 잠금 해제되는 기록을 그대로 유지합니다.
전체 미션 화면은 조건을 충족한 과제와 아직 진행 중인 과제를 대비해 보여주며, 각 미션의 단위와 잠금 해제되는 기록을 그대로 유지합니다.

잠긴 카드를 조건과 연결하기

Unknown · 004 카드는 Twilight zone station hold 미션을 명시하고 0 holds to go라는 문구로 안내합니다. 이어서 미션 화면은 Complete and unlock을 제공합니다. 이러한 레이블을 연결하면 측정이 완료되었는데도 카드가 여전히 미확인 상태인 이유를 방문자가 이해하는 데 도움이 됩니다. 최종 잠금 해제 액션을 아직 수행하지 않았기 때문입니다.

상태에 따라 다른 액션 사용하기

Log a dive · +1은 점진적인 진행을 전달하고, Complete and unlock은 컬렉션에 편입되는 전환을 나타냅니다. 이러한 레이블을 구분하는 편이 모든 카드에 동일한 버튼을 표시하고 방문자가 그 기능을 직접 알아내게 하는 것보다 더 유용합니다.

탐색을 위한 별도 컨트롤 제공하기

해역 및 희귀도 필터는 표본 컬렉션에 속하고, 과제 진행도는 Expeditions에 속합니다. 이를 통해 기존 기록을 찾는 일과 새로운 기록을 얻기 위해 수행하는 과정을 구분합니다. 검색, 결과 없음 상태 또는 더 긴 미션 목록을 추가해 변형할 때도 이러한 구분을 유지해야 합니다.

이 해양 앱 프로토타입이 보여주는 것

어비설 로그는 로컬 컬렉션 및 미션 프로토타입입니다. 원본에는 목격 타임스탬프와 운용 장비가 데모 기록이라고 명시되어 있습니다. 생물학 정보, 희귀도 등급 및 수심 값은 독립적으로 검증된 과학 참고 자료가 아닙니다. 독립 실행형 미리보기에는 실시간 탐사 피드나 클라우드 계정이 없습니다. 제공된 이미지는 로컬 검토용으로 유지되며, 공개적으로 사용하기 전에는 재배포 권한을 별도로 확인해야 합니다.

OpenDesign에서 해양 컬렉션 앱 디자인을 만드는 방법

  1. OpenDesign 다운로드 및 설치

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

    OpenDesign 다운로드
  2. 표본과 미션의 관계 정의하기

    작은 카탈로그와 각 미확인 기록을 공개하기 위한 명확한 규칙부터 시작하세요. 다음의 새 디자인 프롬프트를 원작자의 작업 과정에 대한 설명이 아니라 실용적인 출발점으로 활용하세요.

    제안된 프롬프트

    18개의 예시 표본 중 11개가 처음부터 기록된 해양 컬렉션 앱을 디자인하세요. 청록색을 강조색으로 사용하고 대형 대표 표본 카드가 있는 어두운 모바일 인터페이스를 구성하세요. 일반명, 학명, 희귀도, 발견 수심, 최초 목격 시간을 표시하고 기록 보기와 잠수 액션을 제공하세요. 그 아래에는 해역 및 희귀도 필터를 제공하고 미확인 기록도 계속 표시하세요. 각각의 미확인 기록에는 잠금 해제에 필요한 미션과 남은 조건을 명시해야 합니다. 탐사 화면에는 정지 유지 횟수, 통과 횟수, 표본 수처럼 서로 구분되는 진행 단위가 필요합니다. 조건은 충족했지만 기록을 아직 획득하지 않은 과제 하나를 포함하세요. 해당 상태에는 완료 및 잠금 해제를 사용하고, 미완료 과제에는 잠수 기록하기를 사용하세요. 표본 상세 보기에서는 발견 수심과 참고용 수심 범위를 구분해야 합니다. 관찰 내용과 미션 진행도는 실시간 과학 서비스나 클라우드 계정이 없는 가상의 데모 데이터라고 명시하세요.

  3. 준비, 미완료 및 획득 완료 상태 검토하기

    OpenDesign에 하나의 미션에 대한 세 가지 상태를 모두 표시하도록 요청하세요. 진행도가 증가해도 표시되는 단위는 동일하게 유지해야 합니다. 완료된 과제를 획득하면 의도한 기록이 한 번만 공개되고, 관련 없는 발견을 초기화하지 않은 채 기록된 항목 수가 업데이트되어야 합니다.

  4. 휴대전화에서 기록의 가독성 확인하기

    긴 학명과 세 자릿수 진행 목표를 사용하세요. 하단 내비게이션에 가리지 않도록 레이블, 단위 및 액션의 가독성을 유지하세요. 표본 이미지의 피사체가 잘리지 않도록 프레임에 맞추고, 더 긴 상세 기록은 스크롤할 수 있게 하세요.

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

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

OpenDesign 데스크톱

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

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

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

macOS, Windows 지원