사용 가이드로 건너뛰기
Form Design작성자 Owl-Listener

Form Design 스킬.

첫 필드부터 제출 성공까지의 경로를 수정 과정과 재방문까지 포함해 구체적으로 정의합니다.

  • UX
  • 디자인 가이드
소스 검토 · Form DesignSKILL.md
작업 UX 산출물 • 그룹화와 입력 유형이 포함된 필드 순서 • 레이블, 안내 문구, 검증 동작 • 다단계, 포커스, 오류 요약, 진행 상태 규칙 시작하기 전에 폼 브리프, 필수 필드와 검증 규칙, 기존 폼 화면을 읽을 수 있는 에이전트가 필요합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

Form Design: 데이터 입력을 명확하게

완성된 폼을 위한 필드 순서, 레이블, 입력 유형, 검증과 오류 수정 방식을 정의합니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Form Design는 폼을 처음부터 끝까지 다룹니다. 레이아웃, 레이블, 도움말 텍스트, 입력 유형, 검증, 다단계 진행, 접근성을 다룹니다. 소스는 명확한 읽기 순서와 기대하는 입력을 전달하는 필드 너비를 권장합니다.

세부 동작 지침에는 blur 시 검증, 필드에 연결된 오류, 뒤로 가기 시 입력값 유지, 중요도가 높은 제출 전 검토 단계가 포함됩니다. 이는 실제 데이터와 사용자에 맞게 조정할 설계 결정이며, 테스트하지 않은 폼의 완료율이 개선된다는 증거는 아닙니다.

예상 산출물

  • 그룹화와 입력 유형이 포함된 필드 순서
  • 레이블, 안내 문구, 검증 동작
  • 다단계, 포커스, 오류 요약, 진행 상태 규칙
예시 브리프 보기

브리프에서 검토까지

  1. 01
    필드 줄이고 순서 정하기

    필요한 정보를 파악하고 관련 질문을 명확한 읽기 순서로 묶습니다.

  2. 02
    입력 동작 정의

    입력 방식, 상시 표시 레이블, 도움말 텍스트, 검증 시점을 선택합니다.

  3. 03
    완료와 수정 처리

    유지할 데이터, 뒤로 가기, 오류 포커스, 중요한 제출 전 검토를 정의합니다.

02 활용 상황

사용 시점

새 폼을 설계하거나 기존 폼의 혼란스러운 필드, 검증, 진행 과정을 개선할 때 사용하세요.

적합한 경우

  • 긴 신청 폼진행 상태를 잃지 않으면서 관련 질문을 일관된 단계로 나눕니다.
  • 필드 수준의 불편헷갈리는 안내, 입력 형식, 검증 메시지를 명확히 합니다.

확인할 한계

  • 전환율 상승 보장 없음완료율 개선은 관찰과 측정이 필요합니다.
  • 모든 제품 오류를 다루지는 않음여러 흐름에 걸친 네트워크 및 권한 전략은 단일 폼의 범위를 넘습니다.

준비할 입력

  • 필수 데이터필드, 형식, 필요한 이유를 나열하세요.
  • 검증 규칙실제 클라이언트 및 서버 제약을 제공하세요.
  • 완료 맥락결과, 기기 사용 환경, 나중에 다시 돌아오는지 여부를 설명하세요.

03 핵심 결정

중요한 결정

  1. 수정도 설계 대상

    포커스할 수 있는 요약과 필드에 연결된 메시지는 사용자가 효율적으로 오류를 바로잡도록 돕습니다.

  2. 진행 상태 보존

    뒤로 가기와 부분 완료에는 명시적인 상태 동작이 필요합니다.

04 예시 브리프

집중 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

designer-skills 저장소에서 이 작업의 SKILL.md를 에이전트가 지원하는 스킬 위치에 불러오세요. 진입 파일에는 범용 설치 명령이 정해져 있지 않습니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md

필수 필드와 실제 검증 규칙을 제공하세요. 결과물은 폼 명세이며, 구현과 사용자 테스트는 별도입니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약을 조정하세요.

예시 브리프
form-design을 사용해 이 다단계 프로젝트 브리프 폼을 재설계하세요. 근거 없는 필드를 제거하고, 관련 질문을 묶고, 상시 표시 레이블과 blur 검증을 정의하며, 뒤로 갈 때 입력값을 유지하세요. 접근 가능한 연결형 오류 요약과 최종 검토 단계를 명시하세요.

결과 점검

실제 출력이 다음의 관찰 가능한 기준을 충족하는지 확인하세요.

  • 모든 필드에 프로그램적으로 연결된 상시 레이블이 있습니다.
  • 오류는 수정 방법을 설명하고 해당 필드에 연결됩니다.
  • 뒤로 가기를 해도 입력한 데이터가 유지됩니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 연결된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
Owl-Listener
라이선스
MIT
검토한 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
완성된 폼을 위한 필드 순서, 레이블, 입력 유형, 검증과 오류 수정 방식을 정의합니다.

연결된 소스를 바탕으로 OpenDesign이 작성한 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

플레이스홀더 텍스트가 레이블을 대체할 수 있나요?

소스는 대체할 수 없다고 말합니다. 입력 후에도 레이블이 계속 보여야 합니다.

필드 검증은 언제 해야 하나요?

소스는 키 입력마다 검증하기보다 blur 시 검증하기를 권장합니다. 예외는 실제 상호작용 요구에 맞게 조정하세요.

다단계 폼에 진행 상태 저장이 필요한가요?

소스는 긴 흐름에서 입력값 유지와 진행 상태 저장 동작을 권장합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/form-design/SKILL.md