Appearance
기능 사양서 컴포넌트 가이드
이 가이드에서는 기능 사양서 작성 시 사용할 수 있는 다양한 컴포넌트와 그 활용법을 상세히 설명합니다.
컴포넌트 개요
기능 사양서에서는 사용자 인터페이스를 표현하기 위해 다양한 컴포넌트를 제공합니다. 각 컴포넌트는 실제 UI 요소를 대표하며, 개발자가 정확하게 구현할 수 있도록 도와줍니다.
입력/선택 컴포넌트
제목 (Title)
제목 컴포넌트는 화면의 제목이나 섹션 헤더로 사용됩니다.
사용 예시:
- 화면 메인 제목
- 섹션 헤더
- 그룹 제목
속성:
- 라벨: 제목 텍스트
파라미터 (Parameter)
파라미터는 기본 텍스트 입력 필드를 나타냅니다.
사용 예시:
- 텍스트 입력 필드
- 숫자 입력 필드
- 날짜 입력 필드
속성:
- 라벨: 필드 이름
- 필수 여부: 필수 입력 필드인지 설정
- 값 범위: From-To 값 설정 가능
체크박스 (Checkbox)
체크박스는 예/아니오 형태의 선택 옵션을 제공합니다.
사용 예시:
- 단일 옵션 선택/해제
- 설정 활성화/비활성화
- 다중 선택 목록의 각 항목
속성:
- 라벨: 체크박스 이름
- 필수 여부: 필수 선택인지 설정
- 기본값: 체크/미체크 상태 설정
라디오 그룹 (Radio Group)
라디오 그룹은 여러 옵션 중 하나만 선택할 수 있는 컴포넌트입니다.
사용 예시:
- 단일 선택 옵션 그룹
- 상호 배타적 선택지 제공
- 설정 옵션 선택
속성:
- 라벨: 라디오 그룹 이름
- 필수 여부: 필수 선택인지 설정
- 옵션: 선택 가능한 옵션 목록 정의
- 기본값: 기본 선택 옵션 설정
드롭다운 목록 (List)
드롭다운 목록은 여러 옵션 중 하나를 선택할 수 있는 드롭다운 메뉴입니다.
사용 예시:
- 옵션 목록에서 선택
- 국가, 언어 등 긴 목록에서 선택
- 공간을 절약해야 하는 경우
속성:
- 라벨: 드롭다운 목록 이름
- 필수 여부: 필수 선택인지 설정
- 옵션: 선택 가능한 옵션 목록 정의
- 기본값: 기본 선택 옵션 설정
선택 옵션 컴포넌트
기본 옵션 (Select Option Basic)
기본 옵션은 단일 값 입력 및 선택을 위한 컴포넌트입니다.
사용 예시:
- 단일 값 검색 조건
- 간단한 필터 값 입력
속성:
- 라벨: 옵션 이름
- 필수 여부: 필수 입력인지 설정
- 값: 입력값 설정
범위 옵션 (Select Option Range)
범위 옵션은 From-To 형식의 범위 값을 입력하는 컴포넌트입니다.
사용 예시:
- 날짜 범위 입력
- 금액 범위 입력
- 수량 범위 입력
속성:
- 라벨: 옵션 이름
- 필수 여부: 필수 입력인지 설정
- From 값: 시작 값 설정
- To 값: 종료 값 설정
확장 없는 옵션 (Select Option No Ext)
확장 없는 옵션은 From-To 형식이지만 검색 버튼이 없는 컴포넌트입니다.
사용 예시:
- 자동 적용되는 범위 필터
- 버튼 없이 값 범위만 필요한 경우
속성:
- 라벨: 옵션 이름
- 필수 여부: 필수 입력인지 설정
- From 값: 시작 값 설정
- To 값: 종료 값 설정
레이아웃 및 기타 컴포넌트
그룹 (Group)
그룹은 관련된 컴포넌트를 하나로 묶어 관리하는 컨테이너입니다.
사용 예시:
- 관련 입력 필드 그룹화
- 검색 조건 섹션 구성
- 논리적으로 연관된 컴포넌트 그룹화
속성:
- 라벨: 그룹 제목
- 하위 컴포넌트: 그룹 내에 포함될 컴포넌트 목록
주석 (Comment)
주석은 화면에 설명이나 참고사항을 추가하는 텍스트 컴포넌트입니다.
사용 예시:
- 화면 사용 지침
- 입력 필드 설명
- 주의사항 안내
속성:
- 라벨: 주석 내용
툴바 (Toolbar)
툴바는 버튼 모음을 표시하는 컴포넌트입니다.
사용 예시:
- 기능 버튼 모음
- 작업 버튼 그룹
- 화면 상단/하단 액션 버튼
속성:
- 라벨: 툴바 이름
- 버튼 목록: 툴바에 포함될 버튼 정의
- 필수 여부: 필수 표시 여부 설정
결과 컴포넌트
ALV 그리드 (Grid)
ALV 그리드는 표 형태로 데이터를 표시하는 컴포넌트입니다.
사용 예시:
- 데이터 목록 표시
- 검색 결과 표시
- 트랜잭션 기록 표시
속성:
- 라벨: 그리드 이름
- 필수 여부: 필수 표시 여부 설정
- 컬럼: 표시할 컬럼 정의
- 데이터: 샘플 데이터 정의
컴포넌트 설명 작성 가이드
각 컴포넌트에 대한 상세 설명을 작성하는 것은 개발자와 테스터가 화면을 정확히 이해하는 데 매우 중요합니다. 다음은 효과적인 컴포넌트 설명 작성 가이드입니다:
파라미터 설명 작성 예시
사용자 ID 파라미터:
- 영문, 숫자만 허용 (특수문자 불가)
- 최소 4자, 최대 20자
- 중복 체크 필요
- 입력 시 소문자 자동 변환체크박스 설명 작성 예시
개인정보 동의 체크박스:
- 기본값: 체크 해제
- 체크 필수
- 체크 시 하단 동의 날짜 자동 입력
- 상세 내용은 툴팁으로 표시라디오 그룹 설명 작성 예시
결제 방식 라디오 그룹:
- 옵션: 신용카드, 계좌이체, 포인트 사용
- 기본값: 신용카드
- '포인트 사용' 선택 시 보유 포인트 표시
- 포인트가 0인 경우 '포인트 사용' 옵션 비활성화ALV 그리드 설명 작성 예시
주문 목록 그리드:
- 정렬: 주문일시 기준 내림차순
- 페이징: 페이지당 10개 표시
- 각 행 더블클릭 시 상세 팝업 표시
- 상태 컬럼 값에 따라 행 색상 변경 (완료=녹색, 취소=빨간색)
- 금액 컬럼 우측 정렬, 천단위 구분기호 표시컴포넌트 연결 관계 설명
컴포넌트 간 연결 관계나 상호작용을 다음과 같이 설명할 수 있습니다:
[관계 설명]
- '부서 선택' 드롭다운 변경 시 '담당자' 드롭다운 옵션 자동 갱신
- '날짜 범위' 선택 시 '당일' 체크박스 자동 해제
- '고급 검색' 체크 시 하단 추가 검색 옵션 그룹 표시데이터베이스 테이블 연결 설명
컴포넌트와 테이블 간의 관계를 다음과 같이 설명할 수 있습니다:
[테이블 연결]
- 사용자 ID 파라미터: TB_USER 테이블의 USER_ID 필드 참조
- 부서 드롭다운: TB_DEPARTMENT 테이블의 DEPT_ID, DEPT_NAME 참조
- 주문 목록 그리드: TB_ORDER 테이블 조회 결과 표시화면 레이아웃 설계 모범 사례
논리적 그룹화
관련 있는 컴포넌트들은 그룹으로 묶어 관리하세요:
- 검색 조건 그룹
- 기본 정보 그룹
- 상세 정보 그룹
- 버튼 툴바 그룹
직관적인 레이아웃
사용자 경험을 고려한 레이아웃을 설계하세요:
- 위에서 아래로, 왼쪽에서 오른쪽으로 논리적 흐름 유지
- 관련 필드는 가까이 배치
- 자주 사용하는 기능은 눈에 잘 띄는 위치에 배치
- 일관된 패딩과 간격 유지
명확한 라벨링
모든 컴포넌트에 명확한 라벨을 제공하세요:
- 간결하고 명확한 용어 사용
- 필수 필드 표시 (별표 등)
- 일관된 용어 사용 (예: '저장' vs '등록' 혼용 피하기)
이러한 가이드라인을 따라 컴포넌트를 활용하면 개발자와 테스터가 명확히 이해할 수 있는 고품질 기능 사양서를 작성할 수 있습니다.