SYSTEM BLUEPRINT

매직카 모바일 앱
차량 제어 경험 중심 화면 설계

일반 운전자, 내부 검수 담당자, 앱 개발자 관점에서 핵심 화면과 전달 흐름을 정리했습니다.

일반 운전자 시나리오

차량 상태 확인과 원격 제어 흐름

앱 진입 후 상태를 이해하고 안전하게 제어한 뒤 결과를 확인하는 핵심 여정입니다.

1. 앱 진입

최근 차량 상태와 연결 상태 확인

2. 차량 상태 확인

시동, 잠금, 온도, 배터리 확인

3. 원격 제어 실행

위험 제어는 확인 단계를 거침

4. 처리 결과 확인

완료 또는 실패 피드백 확인

5. 상세 화면 이동

지도, 주행 기록, 설정으로 확장

일반 운전자 | 화면 01

홈 대시보드

magiccar.app/home
내 차량 상태
연결정상
시동꺼짐
도어잠금
실내 온도24도
배터리82퍼센트

[화면 개요 및 목적]

앱 진입 즉시 차량 상태를 한눈에 파악하고 자주 쓰는 제어를 안전하게 실행하는 첫 화면입니다.

[핵심 기능 로직]

상태 정보와 제어 버튼을 분리하고, 원격 시동처럼 영향도가 큰 동작은 확인 단계로 연결합니다.

  • 상태 카드 컴포넌트
  • 제어 전 확인 모달
일반 운전자 | 화면 02

차량상태 화면

magiccar.app/status
차량 상태 요약
배터리, 도어, 시동, 창문, 위치 상태를 카드 단위로 확인합니다.
이상 알림
경고와 주의 상태를 색상과 문구로 분리합니다.

[화면 개요 및 목적]

사용자가 차량의 현재 상태와 이상 여부를 상세히 확인하는 화면입니다.

[핵심 기능 로직]

상태값을 정상, 주의, 경고로 분류하고 각 상태에 맞는 다음 행동을 안내합니다.

  • 상태 배지 규칙
  • 경고 우선순위 체계
일반 운전자 | 화면 03

지도와 주행 기록 화면

지도 패널
현재 위치서울 강남
최근 주행12.4km
주차 시간1시간 22분
상태 패널확장 가능

[화면 개요 및 목적]

차량 위치 확인과 주행 기록 탐색을 하나의 흐름으로 연결합니다.

[핵심 기능 로직]

지도 위 패널을 단계적으로 확장해 위치, 경로, 차량 상태 정보를 전환합니다.

  • 확장형 하단 시트
  • 지도 상태 오버레이
내부 운영 담당자 시나리오

디자인 검수와 개발 전달 흐름

산출물을 검수하고 개발 전달 품질을 높이기 위한 협업 흐름입니다.

1. 자료 확인

체크리스트 기반으로 누락 없이 확인

2. 화면 검수

체크리스트 기반으로 누락 없이 확인

3. 상태값 확인

체크리스트 기반으로 누락 없이 확인

4. 수정 요청

체크리스트 기반으로 누락 없이 확인

5. 최종 전달

체크리스트 기반으로 누락 없이 확인

내부 운영 담당자 | 화면 01

디자인 검수 보드

magiccar.app/u2/1
디자인 검수 보드
핵심 목적
작업자가 바로 확인할 수 있는 단위로 정보를 정리합니다.
검수 기준
화면, 상태, 컴포넌트, 예외 상황을 함께 확인합니다.
전달 방식
Figma 주석과 화면 연결을 기준으로 전달합니다.

[화면 개요 및 목적]

디자인 검수 보드 화면은 협업자가 산출물을 빠르게 이해하고 검수하도록 돕습니다.

[핵심 기능 로직]

체크리스트와 상태 기준을 화면 단위로 묶어 해석 차이를 줄입니다.

  • Figma 컴포넌트 주석
  • 상태별 디자인 토큰
내부 운영 담당자 | 화면 02

컴포넌트 가이드

magiccar.app/u2/2
컴포넌트 가이드
핵심 목적
작업자가 바로 확인할 수 있는 단위로 정보를 정리합니다.
검수 기준
화면, 상태, 컴포넌트, 예외 상황을 함께 확인합니다.
전달 방식
Figma 주석과 화면 연결을 기준으로 전달합니다.

[화면 개요 및 목적]

컴포넌트 가이드 화면은 협업자가 산출물을 빠르게 이해하고 검수하도록 돕습니다.

[핵심 기능 로직]

체크리스트와 상태 기준을 화면 단위로 묶어 해석 차이를 줄입니다.

  • Figma 컴포넌트 주석
  • 상태별 디자인 토큰
내부 운영 담당자 | 화면 03

개발 전달 명세

magiccar.app/u2/3
개발 전달 명세
핵심 목적
작업자가 바로 확인할 수 있는 단위로 정보를 정리합니다.
검수 기준
화면, 상태, 컴포넌트, 예외 상황을 함께 확인합니다.
전달 방식
Figma 주석과 화면 연결을 기준으로 전달합니다.

[화면 개요 및 목적]

개발 전달 명세 화면은 협업자가 산출물을 빠르게 이해하고 검수하도록 돕습니다.

[핵심 기능 로직]

체크리스트와 상태 기준을 화면 단위로 묶어 해석 차이를 줄입니다.

  • Data Aggregation & Visualization
  • 상태별 디자인 토큰
앱 개발자 시나리오

Figma 가이드 기반 구현 흐름

산출물을 검수하고 개발 전달 품질을 높이기 위한 협업 흐름입니다.

1. 자료 확인

체크리스트 기반으로 누락 없이 확인

2. 화면 검수

체크리스트 기반으로 누락 없이 확인

3. 상태값 확인

체크리스트 기반으로 누락 없이 확인

4. 수정 요청

체크리스트 기반으로 누락 없이 확인

5. 최종 전달

체크리스트 기반으로 누락 없이 확인

앱 개발자 | 화면 01

Figma 화면 연결

magiccar.app/u3/1
Figma 화면 연결
핵심 목적
작업자가 바로 확인할 수 있는 단위로 정보를 정리합니다.
검수 기준
화면, 상태, 컴포넌트, 예외 상황을 함께 확인합니다.
전달 방식
Figma 주석과 화면 연결을 기준으로 전달합니다.

[화면 개요 및 목적]

Figma 화면 연결 화면은 협업자가 산출물을 빠르게 이해하고 검수하도록 돕습니다.

[핵심 기능 로직]

체크리스트와 상태 기준을 화면 단위로 묶어 해석 차이를 줄입니다.

  • Figma 컴포넌트 주석
  • 상태별 디자인 토큰
앱 개발자 | 화면 02

상태값 구현 가이드

magiccar.app/u3/2
상태값 구현 가이드
핵심 목적
작업자가 바로 확인할 수 있는 단위로 정보를 정리합니다.
검수 기준
화면, 상태, 컴포넌트, 예외 상황을 함께 확인합니다.
전달 방식
Figma 주석과 화면 연결을 기준으로 전달합니다.

[화면 개요 및 목적]

상태값 구현 가이드 화면은 협업자가 산출물을 빠르게 이해하고 검수하도록 돕습니다.

[핵심 기능 로직]

체크리스트와 상태 기준을 화면 단위로 묶어 해석 차이를 줄입니다.

  • Figma 컴포넌트 주석
  • 상태별 디자인 토큰
앱 개발자 | 화면 03

QA 체크리스트

magiccar.app/u3/3
QA 체크리스트
핵심 목적
작업자가 바로 확인할 수 있는 단위로 정보를 정리합니다.
검수 기준
화면, 상태, 컴포넌트, 예외 상황을 함께 확인합니다.
전달 방식
Figma 주석과 화면 연결을 기준으로 전달합니다.

[화면 개요 및 목적]

QA 체크리스트 화면은 협업자가 산출물을 빠르게 이해하고 검수하도록 돕습니다.

[핵심 기능 로직]

체크리스트와 상태 기준을 화면 단위로 묶어 해석 차이를 줄입니다.

  • Figma 컴포넌트 주석
  • Issue Tracking & Status Management