1. 개요 (Overview)
기존 문서 작성 프로그램에서 와이어프레임을 그린 후 화면 명세 번호를 일일이 대조하며 표를 작성하던 번거로움을 해결합니다. SB Editor는 드래그 앤 드롭 UI 캔버스와 실시간 연결되는 뱃지 명세표 시스템을 통합 제공합니다.
텍스트, 버튼, 메뉴, 라디오, 체크박스 등 실무 필수 UI 콤포넌트를 클릭 한 번으로 배치하고 자유롭게 편집합니다.
캔버스에 설명 번호 뱃지를 추가하면 우측 명세표와 실시간 연동되어 번호 정렬 및 강조 효과가 자동 처리됩니다.
작성된 화면 명세서를 고해상도 PNG 이미지 및 다중 페이지 PDF 문서로 바로 내보내거나 JSON 프로젝트로 저장할 수 있습니다.
2. 화면 구성 (Interface Layout)
SB Editor 화면은 크게 4가지 작업 영역으로 구분되어 있습니다.
- 프로젝트 관리: 열기(.json 불러오기), 저장(.json 백업)
- 내보내기 Dropdown: PNG 이미지 및 PDF 문서 다운로드
- 페이지 제어: 페이지 추가(+ 페이지 추가), 페이지 선택 드롭다운
- 화면 방향: 가로(Landscape) / 세로(Portrait) 전환
- 초기화/삭제: 현재 페이지 삭제, 전체 스토리보드 초기화
- 사용 설명서: 본 도움말 페이지 열기
- 기본 컴포넌트: 텍스트, 라인, 화살표, 사각형, 원형, 버튼
- 선택 요소: 체크박스, 라디오버튼, 토글스위치
- 메뉴 요소: 가로메뉴(GNB), 세로메뉴(LNB)
- 목록 요소: 세로형 목록, 가로형 Grid 목록
- 상세 설명 뱃지: [+ 설명 번호 추가] 버튼 및 설명 가이드
- 격자 그리드 기반 와이어프레임 편집 공간
- 컴포넌트 위치 이동(Drag & Drop), 크기 조절(Resize Handle)
- 객체 잠금(🔓/🔒), 삭제(X) 직관적 컨트롤 바
- 상세 속성: 선택된 컴포넌트의 폰트 크기, 색상, 채우기/보더, 회전, X/Y 위치값 세부 조절 및 복제
- 상세 설명 목록: 캔버스 뱃지 번호에 해당하는 기능 설명 텍스트 작성 영역
3. UI 컴포넌트 라이브러리 (Components)
좌측 패널에서 원하는 컴포넌트를 클릭하면 캔버스 중앙에 즉시 생성됩니다. 모든 텍스트 기반 컴포넌트는 더블클릭 또는 클릭하여 직접 글자를 수정할 수 있습니다.
| 카테고리 | 컴포넌트 이름 | 기능 설명 및 활용 |
|---|---|---|
| 기본 요소 | 📝 텍스트 (Text) | 제목, 설명문, 라벨 등 일반 문구 삽입용 컴포넌트 |
| 기본 요소 | ➖ 라인 / ↗️ 화살표 | 구분선 및 화면 요소 간 동선/흐름을 표시하는 벡터 라인 |
| 기본 요소 | ⬛ 사각형 / ⭕ 원형 | 배경 박스, 카드 컨테이너, 프로필 이미지 레이아웃용 도형 |
| 기본 요소 | 🔘 버튼 (Button) | CTA(Call To Action) 버튼 및 클릭 액션 요소 표시 |
| 선택 요소 | ⏹️ 체크박스 / ⏺️ 라디오 / 🔛 토글 | 다중 선택, 단일 선택, 옵션 스위치 등 폼 요소 디자인 |
| 메뉴 요소 | ➖ GNB(가로메뉴) / ⏸️ LNB(세로메뉴) | 웹사이트 상단 네비게이션바 및 서브 세로 메뉴바 설계 |
| 목록 요소 | ⏬ 세로목록 / ⏩ 가로목록 | 게시판 리스트, 피드, 상품 카드 그리드 목록 표현 |
4. 상세 설명 뱃지 시스템 (Specification Badges)
화면 설계서의 핵심은 화면 UI 위에 번호(1, 2, 3...)를 매기고 해당 번호에 대한 상세 동작 설명(기능 명세)을 작성하는 것입니다.
설명 번호 추가하기
좌측 패널 하단의 [+ 설명 번호 추가] 버튼을 클릭합니다. 캔버스 위에 빨간색 번호 뱃지가 추가되고, 우측 패널에 동봉된 텍스트 입력창이 생성됩니다.
뱃지 배치 및 기능 명세 작성
캔버스 위 뱃지를 설명하려는 UI 위치로 드래그 이동시킨 뒤, 우측 명세표 입력창에 "버튼 클릭 시 모달 팝업 오픈", "유효성 검사 규칙" 등 상세 설명을 작성합니다.
실시간 양방향 하이라이트
우측 목록의 항목에 마우스를 올리면 캔버스 상의 해당 번호 뱃지가 빨간색 테두리와 함께 강조되어 수많은 뱃지 중에서도 원하는 항목을 즉시 찾을 수 있습니다.
자동 번호 재정렬
중간에 뱃지를 삭제하더라도 1번부터 시작하는 번호 순서가 자동으로 재정렬되므로 번호가 뒤엉킬 염려가 없습니다.
5. 속성 편집 및 객체 제어 (Editing & Controls)
캔버스 위에서 컴포넌트를 클릭하면 선택 상태가 되며 우측 상단 [상세 속성] 패널이 활성화됩니다.
- 텍스트 설정: 폰트 크기(Size) 지정 및 글자 색상(Color Picker) 변경
- 도형 채우기: 채우기 색상 선택 또는 [채우기 없음] 체크 시 투명 배경 지정
- 보더 색상: 테두리 및 라인/화살표의 색상 실시간 변경
- 회전 (Rotate): -180° ~ 180° 범위 슬라이더 및 정수 수치 직접 입력
- 위치 (X, Y): 캔버스 내 exact X좌표 및 Y좌표 값 지정
- 복제 기능: 우측 상단 [복제] 버튼 클릭 시 기존 스타일 그대로 20px 오프셋 복제
컴포넌트 잠금 (Lock) 기능 활용
레이아웃 배경이나 기본 틀을 다 완성한 후 🔒 잠금 아이콘을 누르면 드래그 이동 및 크기 변경이 고정되어 실수로 위치가 어긋나는 것을 방지할 수 있습니다. 🔓 버튼으로 언제든 해제할 수 있습니다.
6. 다중 페이지 및 화면 스토리보드 관리
여러 화면 흐름(로그인 → 메인 → 상세페이지)을 하나의 프로젝트 안에서 다중 페이지로 관리할 수 있습니다.
상단 툴바의 [+ 페이지 추가] 버튼을 누르면 현재 작업 중인 페이지 바로 뒤에 새로운 빈 스토리보드 페이지가 삽입됩니다.
상단 [Page selector] 드롭다운에서 원하는 페이지를 지정하여 빠르게 이동할 수 있으며, [삭제] 버튼으로 현재 페이지를 제거합니다.
가로(Landscape) / 세로(Portrait) 캔버스 전환
PC 웹 화면을 설계할 때는 가로(1024x768), 모바일 앱 화면이나 세로형 뷰를 설계할 때는 세로(768x1024) 옵션을 선택하세요. 페이지별로 방향을 설정할 수 있습니다.
7. 저장 및 내보내기 (Export & Backup)
완성된 스토리보드를 문서로 저장하거나 팀원 및 고객사에 전달하기 위한 고해상도 내보내기 기능을 제공합니다.
내보내기 ▶ PDF Document (.pdf) 선택 시, 프로젝트의 전체 페이지가 깔끔한 캔버스 + 명세표 양식으로 정렬된 PDF 파일로 생성됩니다.
내보내기 ▶ PNG Image (.png) 선택 시, 각 페이지별 고해상도 렌더링 이미지 파일이 개별 다운로드됩니다.
[저장] 버튼을 누르면 storyboard-xxx.json 파일이 다운로드됩니다. 추후 [열기] 버튼으로 불러와 언제든 재편집이 가능합니다.
8. 자주 묻는 질문 & 사용 팁 (FAQ)
아닙니다! SB Editor는 자동 저장(Auto-save) 기능이 내장되어 있어 브라우저 LocalStorage에 실시간 백업됩니다. 단, 브라우저 쿠키 삭제 시 사라질 수 있으므로 작업 완료 후에는 꼭 [저장] 버튼을 눌러 JSON 파일을 백업하세요.
SB Editor의 내보내기엔진은 캔버스와 명세표를 그래픽 DOM 합성 렌더링(HTML2Canvas) 방식으로 처리하므로 폰트 깨짐 없이 작성한 그대로 선명하게 출력됩니다.