인터페이스 UI

Status
작업 완료
분류
UI
설명

게임 인터페이스 UI 정리

딤당자
U
Untitled
U
Untitled
U
Untitled
최종 편집 일시
Jul 10, 2024 8:06 AM
최종 편집자
U
Untitled
History

0. 문서 내 용어 정리

History이름요약

포인트 커서가 대상 위에 위치함

상시/특정 상황에서 화면 내 출력하는 해당 기능 대응 조작키

1. UI 위치 정의

History대분류이름요약
위치

인게임 기본 플레이 화면 UI

위치

구체적인 게임 플레이를 위해 필요한 정보를 상세하지만 가독성있게 전달하는 방향으로 UI 구성

1.1. 게임 화면

image
  • 인게임 기본 플레이 화면 UI
  • 캐릭터, 적의 상황(캐릭터의 코스트, 적의 인식 상태 등)을  잘 인지할 수 있는 방향으로 UI 구성

1.2. 메인 독

image
  • 게임 화면 위 정보 표시 UI
  • 구체적인 게임 플레이를 위해 필요한 정보를 상세하지만 가독성있게 전달하는 방향으로 UI 구성

2. UI State 정의

History이름요약

기술이 선택되지 않은, 이동이나 상호작용 등의 조작이 이루어지는 상태

사용할 기술이 선택된 상태에서 기술 사용 대상을 선택하는 상태

2.1. 캐릭터 선택 상태

image
  • 기술이 선택되지 않은, 이동이나 상호작용 등의 조작이 이루어지는 상태
  • 게임 화면 UI 상의 조작이 주로 이루어짐
  • 메인 독 UI에서 기술, 스테이터스, 퀘스트 등의 정보를 확인할 수 있으며, 추가 조작을 통해 캐릭터 상세 정보, 인벤토리 툴팁을 출력함

2.2. 기술 준비 상태

image
  • 사용할 기술이 선택된 상태에서 기술 사용 대상을 선택하는 상태
  • 현재 선택된 캐릭터가 자동으로 화면 중앙에 위치됨
  • 현재 사용중인 기술 아이콘에는 깜빡임 효과 적용

3. 게임 화면 UI

3.1. UI 정의

History이름요약

마우스/L스틱으로 조작 가능한, 화살표 모양의 커서 UI

현재 선택된 캐릭터 하단의 선택 상태 인지 UI

이동 가능한 영역 내에 흰색 그리드 외곽선 표시 UI

이동 가능 범위 내 빈 타일 중 포인트 커서가 위치한 그리드에 표시되는 UI

캐릭터로부터 타일 커서까지의 길찾기 경로 표시 UI

적 캐릭터의 시야 범위를 나타내는 외곽선 + 음영 UI

상호작용이 가능한 대상 오브젝트 외곽선 UI

캐릭터 커서, 이동 가능 범위를 대체하는 외곽선 UI(이동 가능 범위와 동일한 표시 방식)

타일 커서를 대체, 포인트 커서 위치 타일 중심으로 스킬 실행 범위를 표시하는 붉은색 영역 UI

설정, 토글키로 사용 가능하며 통제권이 없는 상태에서만 배속 연출(이동, 공격, 적알람, 적턴 등)

화면 좌상단에 배치되는 현재 프레임 표시 UI

화면 내 적 캐릭터 이미지

공격 시 일시적으로 공격당한 캐릭터 위에 출력되는 텍스트

image
image
image
image

3.2. 상황 별 UI 동작

3.2.1. 아군 캐릭터 확인

💡
아군 캐릭터가 있는 타일을 포커스할 때
1️⃣
선택된 아군 캐릭터 타일일 경우
image
2️⃣
선택되지 않은 아군 캐릭터 타일일 경우
image
History입력 위치입력 행동이름
선택된 아군 캐릭터 타일
포커스
선택되지 않은 아군 캐릭터 타일
포커스

3.2.2. 적 캐릭터 확인

💡
적 캐릭터가 있는 타일을 포커스할 때
1️⃣
적 캐릭터가 미인식 상태라면
image
2️⃣
적 캐릭터가 추적 상태라면
image
3️⃣
적 캐릭터가 인식 상태라면
image
History입력 위치입력 행동적 캐릭터 조건이름
적 캐릭터 타일
포커스
-
적 캐릭터 타일
포커스
미인식 상태
적 캐릭터 타일
포커스
추적 상태
적 캐릭터 타일
포커스
인식 상태

3.2.3. 적 시야 범위 확인

💡
적 시야 범위의 빈 타일을 포커스할 때
1️⃣
적 캐릭터가 미인식 상태라면
image
2️⃣
적 캐릭터가 추적 상태라면
image
3️⃣
적 캐릭터가 인식 상태라면
image
History입력 위치입력 행동적 캐릭터 조건이름
적 시야 범위 빈 타일
포커스
미인식 상태
적 시야 범위 빈 타일
포커스
미인식 상태
적 시야 범위 빈 타일
포커스
미인식 상태
적 시야 범위 빈 타일
포커스
미인식 상태
적 시야 범위 빈 타일
포커스
추적 상태
적 시야 범위 빈 타일
포커스
추적 상태
적 시야 범위 빈 타일
포커스
추적 상태
적 시야 범위 빈 타일
포커스
인식 상태
적 시야 범위 빈 타일
포커스
인식 상태

3.2.4. 인식 상태인 적 시야 범위 진입/이탈

💡
적 캐릭터가 인식 상태일 때
1️⃣
선택된 캐릭터가 적 시야 범위 에 있다면, 조작과 무관하게
image
2️⃣
선택된 캐릭터가 적 시야 범위 에 있다면
🅰️
적 시야 범위 내의
1️⃣
적 캐릭터 타일을 포커스하면
image
🅱️
적 시야 범위 밖의 캐릭터 이동 가능 범위 포커스하면
image
History입력 위치입력 행동선택된 캐릭터 조건적 캐릭터 조건이름
-
-
적 시야 범위 밖
인식 상태
적 캐릭터 타일
포커스
적 시야 범위 내
인식 상태
적 시야 범위 밖 캐릭터 이동 가능 범위
포커스
적 시야 범위 내
인식 상태
적 시야 범위 밖 캐릭터 이동 가능 범위
포커스
적 시야 범위 내
인식 상태

3.2.5. 상호작용(상호작용 규칙 참고)

💡
선택된 캐릭터가 대상과 상호작용 가능 범위 안에 있을 때
1️⃣
상호작용 가능 대상을 포커스하면
🅰️
상호작용 대상의 종류에 무관하게
image
2️⃣
상호작용 버튼을 입력하면
🅰️
상호작용 대상이 아이템박스라면
image
History입력 위치입력 행동선택된 캐릭터 조건상호작용 대상 조건이름
상호작용 가능 대상
포커스
상호작용 가능 범위 내
-
상호작용 가능 대상
포커스
상호작용 가능 범위 내
-
-
상호작용 버튼
상호작용 가능 범위 내
아이템박스

3.2.6. 전술 시야

💡
전술시야 보기 버튼을 홀드중일 때
image
1️⃣
적 캐릭터가 미인식 상태 라면
2️⃣
적 캐릭터가 추적 상태라면
3️⃣
적 캐릭터가 인식 상태라면
image
History입력 행동적 캐릭터 조건이름비고
전술시야 보기 버튼 홀드
-
전술시야 보기 버튼 홀드
미인식 상태

전술 시야 내 1순위로 출력

전술시야 보기 버튼 홀드
추적 상태

전술 시야 내 2순위로 출력

전술시야 보기 버튼 홀드
인식 상태

전술 시야 내 3순위로 출력

3.2.7. 기술 준비 상태

💡
선택된 캐릭터가 기술 선택을 완료한 상태일 때(기술 준비 상태일 때)
1️⃣
적 캐릭터가 기술 범위 밖이면
🅰️
적 캐릭터 대상으로 기술 사용을 시도했을 때
🅱️
적 캐릭터를 포커스했을 때
image
2️⃣
적 캐릭터가 기술 범위 안이면
🅰️
명중률이 100% 이하일 경우
  • 명중률 텍스트를 흰색으로 표시
image
🅱️
명중률이 100% 이상일 경우
  • 명중률 텍스트를 초록색으로 표시
image
🅰️
적 캐릭터가 기습 공격을 당하는 공격을 준비중이라면
  • 적 캐릭터 위 기습 아이콘 표시
image
image
🅱️
적 캐릭터가 포위 공격을 당하는 공격을 준비중이라면
  • 적 캐릭터 위 포위 아이콘 표시
image
image
1️⃣
적 캐릭터가 취약한 공격 속성의 공격을 준비중이라면
  • 아이콘을 빨간색으로 표시
2️⃣
적 캐릭터가 내성을 가지는 공격 속성의 공격을 준비중이라면
  • 아이콘을 회색으로 표시
3️⃣
적 캐릭터가 취약/내성이 아닌 공격 속성의 공격을 준비중이라면
  • 아이콘을 흰색으로 표시
🅰️
적 캐릭터가 기습, 포위 당하는 상황이 아니고, 취약 또는 내성 공격 속성의 공격을 준비중이라면
  • 적 캐릭터 위에 디폴트 아이콘 표시 및 아이콘 색 적용
image
History입력 위치입력 행동선택된 캐릭터 조건적 캐릭터 조건이름
-
-
기술 선택 완료
-
적 캐릭터 타일
클릭
기술 선택 완료
기술 범위 밖
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 밖
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안
적 캐릭터 타일
포커스
기술 선택 완료명중률 100% 미만
기술 범위 안
적 캐릭터 타일
포커스
기술 선택 완료명중률 100% 이상
기술 범위 안
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안취약 방어속성
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안일반 방어 속성기습포위
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안내성 방어속성
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안기습
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안포위
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안일반 공격취약 방어속성내성 방어속성
적 캐릭터 타일
포커스
기술 선택 완료
기술 범위 안일반 공격일반 방어 속성

3.2.8. 기술 사용

💡
적 캐릭터에게 공격을 시행했을 때
1️⃣
취약한 공격 속성으로, 성공적으로 공격했다면(빗맞음, 막기 제외)
치명타가 발생했다면
2️⃣
내성을 가지는 공격 속성으로, 성공적으로 공격했다면(빗맞음, 막기 제외)
History입력 위치입력 행동적 캐릭터 조건이름
적 캐릭터 타일
기술 사용
기술 범위 안
적 캐릭터 타일
기술 사용
기술 범위 안공격 성공취약 방어속성
적 캐릭터 타일
기술 사용
기술 범위 안공격 성공취약 방어속성치명타로 공격받음
적 캐릭터 타일
기술 사용
기술 범위 안공격 성공내성 방어속성

4. 메인 독 UI

4.1. UI 정의

History이름요약

마우스/L스틱으로 조작 가능한, 화살표 모양의 커서 UI

선택된 캐릭터의 기술 목록 UI

선택된 캐릭터의 WP, TP, 체력(HP) 표시 UI

선택된 캐릭터가 장착중인 무기 표시 및 무기 세트 변경 버튼 UI

선택된 캐릭터가 보유한 버프 표시 UI

게임 화면에서 캐릭터(아군/적) 포커스 시에만 출력되는, 대상 이름, 스테이터스, 버프 등 표시 UI

내 파티원 전체의 레벨, 스테이터스 표시 UI

현재까지 진행한 턴 표시 및 턴 종료 버튼 UI

현재 부여된 퀘스트 목록 확인 UI

정보 창 버튼 UI

인벤토리 툴팁 버튼 UI

도움말 창 버튼 UI

설정 툴팁 버튼 UI

턴 종료 창 UI

게임 플레이 가이드 창

내 캐릭터 정보창 단축키 입력, 선택된 캐릭터 우클릭, 적 캐릭터 상세보기 시에만 출력되는, 캐릭터 정보창 UI - 무기, 기술, 특질 정보는 정보창 우측에 붙어 나오게 변경

인벤토리 버튼/단축키 입력 시에만 출력되는, 내 파티의 인벤토리창 UI

에러 메시지 출력 UI

아이템박스 목록 UI

기술 아이콘 포커스, 사용 시에 출력되는 스킬 설명 UI

스테이터스 바 포커스 시에 출력되는, 스테이터스 정보 표시 UI

버프 아이콘 포커스 시에 출력되는, 버프 정보 표시 UI

장착 무기, 정보창, 인벤토리창, 아이템박스창에서 무기 아이콘 포커스 시에 출력되는, 무기 정보 표시 UI

설정 버튼/단축키 입력 시에만 출력되는, 설정창 UI

인벤토리창, 아이템박스창에서 무기/사용형 아이 외 아이템 아이콘 포커스 시에 출력되는, 무기 정보 표시 UI

설정, 토글키로 사용 가능하며 통제권이 없는 상태에서만 배속 연출(이동, 공격, 적알람, 적턴 등)

무기 교체 버튼 UI

4.1.1. 주요 메인 독 UI

1️⃣
스킬 리스트
  • 선택된 캐릭터가 보유한 기술 목록
  • 무기 기술 2종, 캐릭터 기술 6종으로 구성
    • 무기 기술은 1, 2로 단축키 할당
    • 캐릭터 기술은 3~8키로 단축키 할당
    • image
2️⃣
스테이터스 바
  • 선택된 캐릭터의 WP, TP, 체력(HP), 잠식도 표시
  • 윗줄에 WP, TP 2개 가로로 표기
  • 아랫줄에 잠식도, 체력 2개 세로로 표기
  • image
💡
대상 스테이터스 바
  • 게임 화면에서 캐릭터(아군/적) 포커스 시에만 출력되는, 대상 이름, 스테이터스, 버프 표시 UI
  • 아군 스테이터스 바의 경우, 체력과 버프(왼쪽부터 정렬) 표시
  • image
  • 적군 스테이터스 바의 경우, 체력과 버프(왼쪽부터 정렬), 공격 속성에 따른 방어 속성을 표시
    • 방어 속성의 경우 약점일 경우 빨간색, 내성일 경우 회색으로 표시
    • image
💡
기술 툴팁
  • 기술 아이콘 포커스, 사용 시에 출력되는 스킬 설명 UI
  • 캐릭터 선택 상태 중 기술 아이콘 포커스, 기술 준비 상태 중 다른 스킬 미리보기 시 아래와 같은 순서로 정보 표기
    1. 기술 명 // 사용형/지속형 여부
    2. 코스트 // 기술 사거리+기술 효과 범위
    3. 공격 속성+피해량 // 명중률
    4. 기술 사용 조건
    5. 기술 효과
      • 기술 효과 내 키워드는 모두 볼드 처리
    6. 우측에 기술 관련 키워드 표시
    7. image
  • 기술 준비 상태 중 선택한 기술은 동일 내용에서 기술 사거리 + 기술 효과 범위를 제외한 정보 표기
  • 좌측에 해당 기술이 포위/기습으로 적용되는지를 아이콘으로 표기하는 패널 표기
    • 해당 조건 만족 시 아이콘이 흰색으로 변경
    • image
💡
캐릭터 정보창
image
image

4.2. 상황 별 UI 동작

4.2.1. 정보 확인 - 툴팁 출력

1️⃣
기술 아이콘을 포커스하면
3️⃣
무기 아이콘을 포커스하면
4️⃣
버프 아이콘을 포커스하면
History입력 위치입력 행동이름
기술 아이콘
포커스
스테이터스 바
포커스
무기 아이콘
포커스
버프 아이콘
포커스

4.2.2. 정보 확인 - 강조&메시지

💡
메인 독 UI 중
1️⃣
퀘스트를 포커스하면
2️⃣
턴 종료 버튼포커스하면
3️⃣
인벤토리 버튼포커스하면
4️⃣
턴 종료 버튼포커스하면

4.2.3. 행동 - 메인 독 직접 입력

💡
메인 독에서 직접
1️⃣
무기 교체 버튼을 클릭하면
2️⃣
턴 종료 버튼을 클릭하면
3️⃣
인벤토리 버튼을 클릭하면
4️⃣
설정 버튼을 클릭하면
History입력 위치입력 행동이름
'교체' 버튼
클릭
턴 종료 버튼
클릭
인벤토리 버튼
클릭
설정 버튼
클릭