폼 페이지
폼 페이지 (Form Page)
폼 페이지는 정보 추가와 입력에 사용되는 페이지 유형이에요. 사용자가 요구사항에 따라 정보를 입력하고 시스템이 사용할 수 있게 제출하도록 하거나, 애플리케이션 설정을 안내해요.
출처: 문서
본문
폼 페이지는 정보 추가와 입력에 사용되는 페이지 유형이에요. 사용자가 요구사항에 따라 정보를 입력하고 시스템이 사용하도록 제출하게 하거나, 사용자를 애플리케이션 설정으로 안내해요.
디자인 목표 (Design Goals)
사용자가 현재 페이지 작업을 명확히 이해하고, 수정 대상을 빠르게 찾아 위치시키며, 폼 항목의 의미와 효과를 쉽고 정확하게 이해하도록 도와줘요. 동시에 입력 과정을 단순화해서, 사용자가 정확하고 쉽고 빠르게 작업을 완료할 수 있도록 보장해요.
디자인 원칙 (Design Principles)
효율적 (Efficient)
합리적인 정보 구성과 폼 컴포넌트를 사용해 사용자가 폼 페이지 작업을 빠르게 완료하게 해요.
명확한 (Clear)
안전 (Security)
작업의 결과를 보장하는 합리적인 메커니즘. 예를 들어 복잡한 폼에는 분산 또는 즉시 저장 메커니즘을 제공하고, 시나리오 작업에 따라 되돌아가기, 리셋, 취소, 지우기, 실행 취소 같은 후회와 빠른 수정 기능을 제공해요.
해야 할 것과 하지 말 것 (Do & Don’t)
폼 페이지에서 폼 항목을 정리하고 제시할 때는 간결한 표현, 효율성, 정확성에 주의해서 사용자 입력 비용이 늘지 않게 해요.
폼 페이지에서 같은 유형의 콘텐츠에 서로 다른 컴포넌트나 표현 형식을 사용하지 마세요. 사용자의 이해 비용이 늘어나요.
폼 항목의 제목과 프롬프트는 이해하기 어려운 단어를 쓰거나 너무 길어서 높은 이해 비용을 만들지 않아야 해요. 흔하지 않은 단어를 피할 수 없다면 도움말 설명 같은 보조 요소를 사용해요.
채움 힌트에 중복된 당연한 문장을 채우는 걸 피해요. 예를 들어 "이름"이라는 폼 항목의 입력 힌트가 "이름을 입력하세요."인 경우를 말해요.
어떻게 디자인할까 (How to Design)
폼 페이지 템플릿은 단일 폼 제출 경험에 집중해요. 작업 복잡도에 따라 네 가지 레이아웃 솔루션을 제공해요:
- 일반 레이아웃 (Normal Layout)
- 작업 분해 및 배치 (Task Decomposition and Arrangement)
- 특정 시나리오 (Specific Scenarios)
일반 레이아웃 (Normal Layout)
채워야 할 모든 정보를 배치해요. 콘텐츠 항목이 적고 연관성으로 그룹화할 수 없는 폼에 적합해요.
템플릿 - 기본 폼 (Basic Form)
언제 사용하나요
간단하고 빠른 작업을 완료해야 할 때, 예를 들어 최소 정보 입력으로 생성할 때.
작업 분해 및 배치 (Task Decomposition and Arrangement)
크고 복잡한 작업을 여러 부분으로 분해하고 연관성에 따라 그룹화해서 사용자 입력 부담을 줄여요. 각 부분은 개별적으로 처리되지만 결국 함께 제출돼요. 크고 복잡한 폼에 적합해요. 적절한 작업 분할은 사용자 오류율을 줄일 수 있어요.
템플릿 - 기본 스텝 폼 (Basic Step Form)
언제 사용하나요
사용자가 채우고 확인해야 할 정보를 선형 프로세스로 정리하고, 스텝 바를 사용해 완전한 프로세스와 진행 상황을 알려줘요. 자주 최종 제출 전에 사용자에게 정보를 다시 확인하게 하고, 프로세스 끝에는 명확한 피드백을 제공해요. 명확한 선형 논리를 가진 작업에 적합해요.
템플릿 - 그룹화 폼 (Grouped Form)
언제 사용하나요
폼 페이지가 단일 작업에서 많은 내용을 채워야 하고, 서로 다른 내용을 분류하고 요약할 수 있을 때.
템플릿 - 편집 가능한 목록 (Editable List, 개발 중)
언제 사용하나요
동적 증가/감소 (Dynamic Increase/Decrease): 폼 항목 수가 ≤3이고 각 입력 상자에 별도 제목이 필요 없을 때 권장해요.
편집 가능한 테이블 (Editable Table): 폼 항목 수가 2~5개일 때 권장해요. 각 행의 내용을 온전히 표시할 수 있어요.
접을 수 있는 패널 편집 (Collapsible Panel Editing): 폼 항목 수가 6~8개일 때 권장해요.
드로어 편집 (Drawer Editing): 폼 항목 수가 >8개일 때 권장해요.
규칙 트리 (Rule Tree): 규칙 편집 시나리오에 적용돼요.
하나 이상의 객체를 추가해야 하고, 각 객체에 여러 그룹의 데이터를 추가하거나 편집해야 하는 페이지에 적합해요.
특정 시나리오 템플릿 (Specific Scenario Templates)
템플릿 - 설정 (Settings)
언제 사용하나요
개인 프로필, 애플리케이션 구성 같은 설정 페이지는 자주 사용되지 않아요. 일반적으로 사용자는 설정 후 자주 수정하지 않아요.
사용 제안 (Usage Suggestions)
페이지마다 설정 모드를 하나 선택하세요:
- 즉시 효과 모드 (Instant Effect Mode): 사용자가 옵션을 수정하면 변경이 즉시 적용돼요;
- 제출 효과 모드 (Submission Effect Mode): 설정 항목 사이에 상호 의존이 있을 때 제출 효과 모드를 사용해요.
설정 항목 수에 따라 그룹화 여부를 결정하세요:
- 개수 <7이면 그룹화 권장하지 않음;
- 개수 7~15면 그룹화 권장;
- 개수 >15면 탭 그룹화 권장.
템플릿 - 로그인 (Login)
Ant Design 표준 로그인 템플릿
템플릿 - 회원가입 (Register)
Ant Design 표준 회원가입 템플릿
디자인 제안 (Design Suggestions)
준비 (Preparation)
- 폼 페이지의 핵심은 폼 항목이에요. 디자인하기 전에 폼의 기본 규칙을 숙지하는 걸 권장해요;
- 사용자의 현재 정보 입력 작업과 관련된 정보 유형을 정리하고, Ant Design 데이터 입력 규칙에 따라 사용할 컴포넌트를 결정해요.
레이아웃 방법 (Layout Methods)
단일 폼 페이지에서는 페이지 표시와 사용자 효율을 균형 잡기 위해 콘텐츠 양에 따라 합리적인 레이아웃을 구성해야 해요. 폼 페이지 레이아웃은 단순에서 복잡까지 네 가지 단계로 나눌 수 있고, 각 단계는 이전 레이아웃 방법과 호환돼요.
기본 레이아웃 (Basic Layout)
채워야 할 모든 정보를 한 영역 안에서 단일 컬럼으로 위에서 아래로 배치해서, 사용자가 세로로 읽도록 안내해요. 연구에 따르면 작업 완료에 가장 효율적인 레이아웃 방법이에요.
약한 그룹화 (Weak Grouping)
공간이 제한될 때, 너비가 짧고 관련 있는 콘텐츠의 폼 항목을 한 줄로 묶어 그룹화를 암시할 수 있어요.
영역 내 그룹화 (In-Area Grouping)
한 영역 안에 분류할 수 있는 콘텐츠가 많을 때, 제목을 구분해서 영역 내 그룹화를 이룰 수 있어요.
카드 그룹화 (Card Grouping)
페이지에 분류할 수 있는 콘텐츠가 많을 때 (보통 두 화면 이상), 카드 그룹화로 담을 수 있어요. 각 카드에는 큰 제목이 포함돼야 해요.
레이아웃 방법 결정하기
어떤 레이아웃 방법을 쓸지는 상세 페이지와 비슷하게, 정보 복잡도와 연관성 두 가지 차원에서 정리해야 해요. 그런 다음 적절한 템플릿을 골라 페이지를 빠르게 구성해요.