화면설계서 유의어도 함께 검색했어요 · 기획서, 와이어프레임, 스토리보드, UI 설계, 화면 설계
웹 기획자가 스토리보드·와이어프레임 등 화면설계 산출물로 소통하는 방법을 설명한 글
PPT 중심 스토리보드(화면설계서) 작성법을 설명하고 템플릿도 제공하는 기획 블로그 글
기획서 작성법을 다룬 네이버 카페 웹만사 연재 글의 두 번째 편
100개 이상 컴포넌트를 제공하는 피그마 Lo-Fi 와이어프레임 키트(무료 데모)
와이어프레임 개념과 9단계 제작 과정을 초보자 눈높이로 설명한 Envato Tuts+ 번역 가이드
사용자 시나리오·페르소나·스토리보드 작성법에 집중한 서비스 기획서 가이드 4편
피그마 화면기획서에 번호·주석을 다는 디스크립션 플러그인 Commentor
네이티브·웹앱·하이브리드 구분과 OS별 UX 등 모바일 기획 유의사항을 다룬 기획서 가이드
개발자를 위해 UX 방법론과 화면 설계서 작성법을 설명한 글
화면설계서용 UI 위젯 스텐실 모음(체크박스·드롭다운·키보드·탭·팝오버 등) 슬라이드
벤치마킹·IA·플로우차트 등 기획서 작성 실무를 다룬 서비스 기획서 가이드 3편
화면 비율·파일명 규칙·버전 관리 등 서비스 기획서 작성 표준을 다룬 가이드 1편
와이어프레임·플로우 다이어그램으로 애자일 UI/UX 디자인 프로세스를 시각화한 비핸스 작업물
레드박스 키오스크 UI 2.0 와이어프레임 작업을 담은 UX 디자이너 포트폴리오 페이지
기가지니 서비스의 화면 설계 규칙과 UX 가이드를 정리한 개발 문서
UI 스토리보드의 목적과 UI 상세설계 6단계 프로세스를 정리한 가이드
키오스크 UI 설계 시 고려할 시야각·입력 방식·공용 환경 특성 정리
오늘의집이 Claude Code로 PRD 입력만으로 어드민 화면 설계를 자동 생성한 과정을 소개한 글
지갑 앱 충전·출금의 일반모드/환전모드 화면 흐름을 설계한 UI 기획서
UI 화면 1만 개 이상 설계 경험에서 얻은 디자인 원칙과 교훈
초급 기획자를 위한 화면 설계 방법을 설명한 네이버 카페 웹만사 게시글
Axure RP 기본 인터페이스(툴바·캔버스·마스터·속성 패널 등)를 입문자 시점에서 설명한 튜토리얼
TV 앱 GUI 설계 시 해상도·세이프존·색상·리모컨 포커스 등 고려사항을 정리한 글
컴포넌트·색상·타이포그래피 등 UI 설계 원칙을 제공하는 구글 머터리얼 디자인 공식 가이드라인
Apple 플랫폼(iOS·macOS·watchOS 등) UI 설계 원칙과 컴포넌트 지침을 담은 공식 디자인 가이드라인
좋은 UI 설계서가 갖춰야 할 5가지 원칙과 소통 중심 작성법
맥비톡방 현직 기획자들의 실무 의견을 정리한 내용입니다. 정답이 하나로 정해진 영역은 아니니 상황에 맞게 참고하세요.
두 파트로 나누면 정리가 쉽습니다.
기획서의 버전업 기준을 설정할 때는 명확한 기준과 일관성이 중요합니다. 다음과 같은 기준을 적용하면 효율적으로 관리할 수 있습니다.
버전 구분
예시) SRS_v1.0.0: 초기 기획서 배포 SRS_v1.1.0: 신규 기능 추가 SRS_v1.1.1: 오타 및 사소한 수정
예시:
효율적 관리 방법
이러한 기준을 적용하면 기획서의 버전 관리가 체계적으로 이루어지며, 수정 및 업데이트 이력을 명확하게 정리할 수 있습니다.
서비스 정책서는 불가항력적인 요소를 우선 고려하며 정책을 결정하고 문서로 작성해야 합니다.
**정책서 작성시 **
정책서 작성 방법(아래 외에도 다양한 방법이 있음)
*팀 구성원 모두가 확인하기 편한 방식으로 정리
해당 부분은 회사/조직별로 다르며, R&R 정리 및 협업 프로세스 협의를 통해 가장 최선의 방법을 찾아나가야 함. 아래 내역은 참고하시기 바라며, RACI 프레임워크 참조한 적용도 좋은 방법임
기획자의 기획서가 과도한 완성형으로 전달되면 디자이너는 경험 개선 여지를 찾기 어려움 → 와이어프레임은 정답이 아님. 더 나은 서비스를 위해 변동될 수 있음을 모두가 인지.
[서비스 제안 & 요구사항 도출]
[서비스 기획]
[와이어프레임]
[UI 디자인]
[피드백 / 수정]
[개발 전달 (핸드오프)]
[공동 리뷰 & 개선]
[Release 기준 정리]
- 프로세스
[요구사항 정의] → [IA 구조 작성 ]→ [UX 구조 검토] → [와이어프레임 작성]→ [UI 디자인 및 비주얼 구성] → [기획자-디자이너 상호 피드백] → [최종안 확정] → [개발 진행 ] → [추가 이슈 반영 & 업데이트]
- 커뮤니케이션 가이드
- 피그마 코멘트 활용 기준
- 모든 피드백은 @이름 태그 + 목적 명시 → 개발자가 양쪽의 의도 파악하는 것도 가능.
- 기획자 : 기능 목적 및 기획 의도 공유
- 디자이너 : 개선 사유 및 의도 공유
(예시)
@디자이너 기존에 정의된 팝업 대신 다른 형태의 팝업이 필요한 이유가 뭔가요?
@기획자 여기서 다른 형태의 팝업을 띄우는 것은 유저에게 다른 액션을 유도하기 위함입니다
- 정기 Sync 및 일일 스크럼을 통해 지속 업데이트
- 각 기능별 기획 의도 vs 실제 구현 내용 비교 가능하도록 UI QA 기준 정리
- 기능 QA & 디자인 QA 일정도 반영 필요
- Tip : Figma dev mode 이용 시 개발자와의 효율적 커뮤니케이션 가능 (유료)
당신의 조직이 기획자 주도 조직이라면?
→ 기획자가 기능 명세 및 IA 구조, 플로우 구성, UX 디자이너에게 피드백 우선권과 리디자인 권한을 부여해야 함
당신의 조직이 디자이너 중심 조직이라면?
→ IA는 디자이너가 가져가고, 기획자는 비즈니스 로직과 기능 명세에 집중해야 함 raci 프레임워크
반응형 규격 구분 및 기획서 작성 가이드
반응형 레이아웃 참고 링크:
사용자 식별 기준: 'sub' 값 사용 (Google의 고유 사용자 ID, 불변) ※ DB에는 자체 user_id를 기본키로 사용하고, 'sub' 값은 별도 매핑 테이블로 관리하는 것이 안전함
수집 가능한 사용자 정보 sub, email, name, picture (기본 제공, 별도 동의 불필요)
중복 가입 처리 동일 이메일 존재 시 "기존 계정이 존재합니다. 간편 로그인을 연결하시겠습니까?"와 같은 UX 제공 필요. 이메일 기준 매핑 또는 사용자 확인 후 병합 여부 결정. 기획서에 병합 정책 명시 권장
세션 및 토큰 관리: access_token 약 1시간 유효, refresh_token 발급 시 access_type=offline 설정 필요. 서비스 자체 세션(JWT 또는 쿠키 등)으로 로그인 유지 필요
보안 고려사항 HTTPS 필수, access_token은 클라이언트 저장 금지, refresh_token은 서버에만 저장. PKCE 사용 권장, Client Secret 노출 금지
기획서 포함 필수 항목
로그인 흐름 : 로그인 버튼 클릭 → Kakao OAuth 인증 → 카카오톡 앱 인증 또는 계정 로그인 → 동의 화면 표시 → Access Token 수신 및 사용자 정보 API 호출 → 회원가입 또는 로그인 처리 → 세션 및 토큰 저장
사용자 식별 기준 : 'id' 값 사용 (Kakao 고유 사용자 ID, 숫자형, 앱 단위로 고정) ※ DB에는 자체 user_id를 기본키로 사용하고, 'id' 값은 별도 매핑 테이블로 관리 권장
수집 가능한 사용자 정보:
세션 및 토큰 관리 access_token 약 6시간 유효, refresh_token은 약 30일 이상 (기기 단위). -> 서비스 자체 세션(JWT 또는 쿠키 등)으로 로그인 유지 필요
보안 고려사항: HTTPS 필수, access_token/refresh_token은 서버에만 저장, 클라이언트 저장 금지. 연동 해제 시 unlink API 호출 필요. 카카오싱크 도입 시 데이터 연동 범위 확대 가능
기획서 포함 필수 항목: 지원 SNS는 Kakao, 사용자 식별 키는 id, 동의 항목 구분(기본/선택), 로그인 vs 회원가입 분기 처리 기준, 이메일 중복 병합 정책 및 UX, 세션 유지 및 토큰 갱신 정책, 연동 해제 처리 흐름 및 unlink API, 보안 정책(HTTPS, 서버 저장 방식 등), 예외 처리(카카오톡 미설치, 선택 동의 거부 등) 카카오 디벨로퍼 사이트
① 사업자는 전자상거래 및 통신판매에서의 표시ㆍ광고, 계약내용 및 그 이행 등 거래에 관한 기록을 상당한 기간 보존하여야 한다. 이 경우 소비자가 쉽게 거래기록을 열람ㆍ보존할 수 있는 방법을 제공하여야 한다.
② 제1항에 따라 사업자가 보존하여야 할 거래기록 및 그와 관련된 개인정보(성명ㆍ주소ㆍ전자우편주소 등 거래의 주체를 식별할 수 있는 정보로 한정한다)는 소비자가 개인정보의 이용에 관한 동의를 철회하는 경우에도 「정보통신망 이용촉진 및 정보보호 등에 관한 법률」등 대통령령으로 정하는 개인정보보호와 관련된 법률의 규정에도 불구하고 이를 보존할 수 있다. → 따라서 현재 전자상거래법상 거래기록의 보존 의무가 있으나, 이를 사업자가 본인인증 의무를 부여하는 것으로 해석하기는 어려움. → 19세 미만 사용자 (청소년) 에 대해서는 법적 보호와 연령 기반 접근 제어를 위해 본인인증이 더욱 중요하게 적용됨. (보호자 동의 절차가 포함되는 경우도 있음)
본인인증은 시스템에 정당한 사용자가 접근했는지를 확인하는 절차로, 서비스 보안과 사용자 정보 보호를 위해 필수적으로 고려되어야 함. 단, 서비스의 목적과 민감도에 따라 인증 절차의 적용 필요 여부 및 수준을 합리적으로 판단하는 것이 중요.
본인인증 : ‘사용자가 진짜 본인이 맞는지?’ 확인하는 절차이며, 실명기반으로 법적 효력이 필요한 경우 본인인증을 필수로 진행
본인인증 특징
점유인증 : ‘사용자가 특정기기를 소지하며 있고 실제로 사용하고 있는지?’ 일회성으로 확인하는 절차이며, 개인정보 외에 해당 PC/모바일 기기를 물리적으로 갖고있거나 접근이 가능한지 증명하는 방식
점유인증 특징 → 인증하는 과정에서 실명확인은 생략 → 현재는 본인인증 + 생체 점유인증 조합으로 활용하여 2단계 인증을 구성하는 추세
인증 구현 방식
약관 동의 및 개인정보 수집 구조 UX/UI 설계
본인인증 프로세스 설계
가입 완료 후 데이터 연동 및 보안 강화
CI/ DI의 차이점