와이어프레임 결과 — 자료 22 · 실무 Q&A 9
웹 기획자가 스토리보드, UI, 와이어프레임 등 화면 설계 산출물로 소통하는 방법과 구성 요소를 설명하는 아티클입니다.
100개 이상의 컴포넌트를 제공하는 피그마 Lo-Fi 와이어프레임 키트(무료 데모)입니다.
와이어프레임의 개념과 제작 과정을 초보자 눈높이로 설명하는 Envato Tuts+의 가이드 번역글입니다.
이 자료는 UI/UX 디자인 프로세스를 와이어프레임과 플로우 다이어그램을 통해 시각적으로 보여줍니다.
레드박스 키오스크 UI 2.0의 와이어프레임 작업을 담은 UX 디자이너 포트폴리오 페이지입니다.
이 아티클은 기획서를 작성하는 방법에 대한 내용을 다루는 연재 글의 두 번째 부분입니다.
피그마 화면기획서 작성 시 디스크립션(주석)을 달 수 있는 Commentor 플러그인입니다.
Axure RP 프로토타이핑 도구의 기본 인터페이스(툴바·캔버스·페이지·라이브러리·마스터·속성·노트·스타일 패널)를 처음 입문자 시점에서 설명하는 튜토리얼 글이다.
PPT 중심의 스토리보드(화면설계서) 작성법을 단계별로 설명하고 템플릿도 제공하는 기획 실무 블로그 글입니다.
성공적인 기획의 동력을 이어가는 방법을 다루며, 벤치마킹, IA, 플로우 차트, 사용자 시나리오 등 기획서 작성의 남은 주제들을 설명하는 가이드입니다.
기획의 품질과 생산성, 효율성을 높이는 서비스 기획서 작성 가이드의 첫 번째 편입니다.
사용자 경험에 집중하여 답을 찾는 방법을 제시하며, 사용자 시나리오와 스토리보드 작성 팁 등 서비스 기획서의 막바지 주제를 다루는 가이드입니다.
스토리보드 작성 시 PC와 모바일 환경을 모두 고려해야 하는 중요성을 강조하며, 웹앱, 하이브리드 앱 용어 정의 등 모바일 기획 시 유의사항을 다루는 가이드입니다.
이 자료는 키오스크 UI 설계 시 고려해야 할 시야각, 화면 크기, 입력 방식 등 모바일 및 웹 UI와 다른 특징들을 공유하는 아티클입니다.
화면 UI 설계서에 쓰는 아이콘을 정리해 둔 구글 슬라이드 템플릿입니다.
비전문가도 화면설계서 작성부터 UI/UX, 구글 애널리틱스까지 서비스 기획 흐름을 따라갈 수 있게 만든 입문 가이드입니다.
이 자료는 UX에 대해 궁금해하는 개발자를 위해 UX 방법론, 포스트잇, 화면 설계서 등 기본 개념을 설명합니다.
이 자료는 기획서 작성 시 필요한 체크박스, 라디오버튼, 토글, 드롭다운 박스 등 UI 용어들을 정리합니다.
구글의 머터리얼 디자인 공식 가이드라인 문서로, 컴포넌트·색상·타이포그래피 등 UI 설계 원칙을 제공합니다.
Apple이 iOS·macOS·watchOS·tvOS 등 자사 플랫폼용 UI 설계 원칙과 컴포넌트 지침을 제공하는 공식 디자인 가이드라인 문서.
이 자료는 좋은 UI 설계서가 갖춰야 할 요소와 작성 방법에 대해 설명합니다.
이 자료는 10000개 이상의 UI 화면을 설계하며 얻은 우선순위 설정, 애니메이션 활용 등 실질적인 경험과 교훈을 공유합니다.
해당 부분은 회사/조직별로 다르며, R&R 정리 및 협업 프로세스 협의를 통해 가장 최선의 방법을 찾아나가야 함. 아래 내역은 참고하시기 바라며, RACI 프레임워크 참조한 적용도 좋은 방법임
기획자의 기획서가 과도한 완성형으로 전달되면 디자이너는 경험 개선 여지를 찾기 어려움 → 와이어프레임은 정답이 아님. 더 나은 서비스를 위해 변동될 수 있음을 모두가 인지.
[서비스 제안 & 요구사항 도출]
[서비스 기획]
[와이어프레임]
[UI 디자인]
[피드백 / 수정]
[개발 전달 (핸드오프)]
[공동 리뷰 & 개선]
[Release 기준 정리]
- 프로세스
[요구사항 정의] → [IA 구조 작성 ]→ [UX 구조 검토] → [와이어프레임 작성]→ [UI 디자인 및 비주얼 구성] → [기획자-디자이너 상호 피드백] → [최종안 확정] → [개발 진행 ] → [추가 이슈 반영 & 업데이트]
- 커뮤니케이션 가이드
- 피그마 코멘트 활용 기준
- 모든 피드백은 @이름 태그 + 목적 명시 → 개발자가 양쪽의 의도 파악하는 것도 가능.
- 기획자 : 기능 목적 및 기획 의도 공유
- 디자이너 : 개선 사유 및 의도 공유
(예시)
@디자이너 기존에 정의된 팝업 대신 다른 형태의 팝업이 필요한 이유가 뭔가요?
@기획자 여기서 다른 형태의 팝업을 띄우는 것은 유저에게 다른 액션을 유도하기 위함입니다
- 정기 Sync 및 일일 스크럼을 통해 지속 업데이트
- 각 기능별 기획 의도 vs 실제 구현 내용 비교 가능하도록 UI QA 기준 정리
- 기능 QA & 디자인 QA 일정도 반영 필요
- Tip : Figma dev mode 이용 시 개발자와의 효율적 커뮤니케이션 가능 (유료)
당신의 조직이 기획자 주도 조직이라면?
→ 기획자가 기능 명세 및 IA 구조, 플로우 구성, UX 디자이너에게 피드백 우선권과 리디자인 권한을 부여해야 함
당신의 조직이 디자이너 중심 조직이라면?
→ IA는 디자이너가 가져가고, 기획자는 비즈니스 로직과 기능 명세에 집중해야 함 raci 프레임워크
맥비톡방 현직 기획자들의 실무 의견을 정리한 내용입니다. 정답이 하나로 정해진 영역은 아니니 상황에 맞게 참고하세요.
두 파트로 나누면 정리가 쉽습니다.
기획서의 버전업 기준을 설정할 때는 명확한 기준과 일관성이 중요합니다. 다음과 같은 기준을 적용하면 효율적으로 관리할 수 있습니다.
버전 구분
예시) SRS_v1.0.0: 초기 기획서 배포 SRS_v1.1.0: 신규 기능 추가 SRS_v1.1.1: 오타 및 사소한 수정
예시:
효율적 관리 방법
이러한 기준을 적용하면 기획서의 버전 관리가 체계적으로 이루어지며, 수정 및 업데이트 이력을 명확하게 정리할 수 있습니다.
반응형 규격 구분 및 기획서 작성 가이드
반응형 레이아웃 참고 링크:
서비스 정책서는 불가항력적인 요소를 우선 고려하며 정책을 결정하고 문서로 작성해야 합니다.
**정책서 작성시 **
정책서 작성 방법(아래 외에도 다양한 방법이 있음)
*팀 구성원 모두가 확인하기 편한 방식으로 정리
사용자 식별 기준: '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의 차이점