프로토타입 기초 데이터 수집 및 스케치
1. 기초 데이터 수집과 레퍼런스 분석
프로젝트 개요 기초데이터의 중요성 데이터 구분
구분 | 설명 | 특징 |
| 디지털 데이터 | 컴퓨터로 처리 가능한 이진수 형태의 데이터 | 저장, 전송, 가공이 용이 |
| 멀티미디어 데이터 | 텍스트, 이미지, 오디오, 비디오 등 복합적 데이터 | 풍부한 표현력과 사용자 경험 제공 |
데이터 종류
성격에 따른 분류•
외부 데이터: 조직 외부에서 수집된 데이터 (시장조사, 경쟁사 분석 등)
•
내부 데이터: 조직 내부에서 생성되고 관리되는 데이터 (고객 정보, 매출 데이터 등)
생성에 따른 분류•
프로듀서 데이터: 콘텐츠 생산자가 직접 생성하는 데이터
•
컨슈머 데이터: 사용자의 행동과 선호도에서 파생되는 데이터
이용에 따른 분류•
유료 데이터: 비용을 지불하고 획득하는 전문적이고 신뢰성 높은 데이터
•
무료 데이터: 공개된 오픈 소스나 무료 리소스를 통해 얻는 데이터
프로슈머적 데이터생산자이자 소비자인 프로슈머가 생성하는 데이터로, SNS 콘텐츠, 리뷰, 블로그 포스팅 등이 해당됩니다.
사용자 분석
웹사이트의 목표 사용자층을 명확히 파악하고, 그들의 니즈와 행동 패턴을 분석합니다.
•
인구통계학적 특성 (연령, 성별, 지역 등)
•
사용자 행동 패턴 및 선호도
•
기술 숙련도 및 접근성 요구사항
•
페르소나 설정 및 사용자 여정 맵핑
데이터 유형
유형 | 설명 | 예시 |
| 사실 | 객관적으로 검증 가능한 정보 | 통계, 날짜, 수치 |
| 개념 | 추상적인 아이디어나 정의 | UX, UI, 반응형 디자인 |
| 절차 | 단계적 수행 방법 | 코딩 순서, 디자인 프로세스 |
| 원리 | 기본적인 법칙이나 규칙 | 디자인 원칙, 웹 표준 |
| 원칙 | 지켜야 할 규범이나 기준 | 접근성 지침, 사용성 원칙 |
| 이야기 | 서사적 구조를 가진 정보 | 브랜드 스토리, 사용자 시나리오 |
| 의견 | 주관적인 견해나 평가 | 리뷰, 피드백, 설문조사 결과 |
| 묘사 | 대상의 특징을 상세히 설명 | 디자인 컨셉, 비주얼 설명 |
| 예측 | 미래에 대한 추정이나 전망 | 트렌드 분석, 시장 예측 |
| 메타데이터 | 데이터에 대한 데이터 | 파일명, 작성일, 태그, 저작권 정보 |
2. 스토리보드 구성
스토리보드란? 모션그래픽 HTML 구조
문서 메타데이터HTML 문서의 정보를 정의하는 요소들입니다.
•
<title>: 브라우저 탭에 표시되는 문서 제목
•
<meta>: 문자 인코딩, 뷰포트, 설명, 키워드 등 메타 정보
•
<style>: 내부 CSS 스타일 정의
•
<link>: 외부 CSS 파일이나 파비콘 연결
•
<base>: 문서의 기본 URL 설정
콘텐츠 구획화웹 페이지를 의미있는 영역으로 나누는 시맨틱 태그들입니다.
•
<header>: 헤더 영역
•
<nav>: 내비게이션 메뉴
•
<main>: 주요 콘텐츠
•
<section>: 주제별 섹션
•
<article>: 독립적인 콘텐츠
•
<aside>: 부가 정보
•
<footer>: 푸터 영역
문자 콘텐츠•
<p>: 문단
•
<ul>, <ol>, <li>: 목록
•
<div>: 블록 컨테이너
•
<h1>~<h6>: 제목 태그
인라인 텍스트 시맨틱•
<a>: 하이퍼링크
•
<strong>, <b>: 굵은 텍스트
•
<em>, <i>: 기울임 텍스트
•
<span>: 인라인 컨테이너
•
<br>: 줄바꿈
3. 아이디어 스케치하기
아이디어 발상법
기법 | 설명 | 활용 방법 |
| 브레인스토밍 | 자유로운 아이디어 도출 | 팀원들과 비판 없이 최대한 많은 아이디어 제시 |
| 체크리스트 | 점검 항목 기반 아이디어 발상 | SCAMPER 기법 활용 (대체, 결합, 적용, 수정, 용도변경, 제거, 재배열) |
| 마인드 맵핑 | 중심 주제에서 가지치기 | 핵심 아이디어를 중심으로 관련 개념들을 시각적으로 연결 |
| 시네틱스 | 유추와 비유를 통한 발상 | 서로 관련 없는 요소들을 연결하여 새로운 아이디어 창출 |
| 강제 결부법 | 무작위 요소 강제 결합 | 전혀 다른 두 가지를 억지로 연결하여 창의적 해결책 모색 |
| 형태 분석법 | 구성요소 분해 후 재조합 | 문제를 작은 단위로 나누고 각 요소의 조합을 탐색 |
| 육색모 사고법 | 6가지 관점에서 사고 | 사실(백), 감정(적), 비판(흑), 긍정(황), 창의(녹), 통제(청) |
시각화
아이디어를 구체적인 이미지로 표현하는 과정입니다. 추상적인 개념을 시각적으로 구현하여 소통을 원활하게 합니다.
시각화 과정1.
간략하고 빠르게 그리기: 완벽함보다는 속도를 우선시하며 기본 구조 잡기
2.
덮어놓고 그리기: 다양한 시도와 실험을 통해 여러 버전 제작
3.
정리하기: 가장 효과적인 아이디어를 선별하고 다듬기
4.
완성: 최종 선택된 아이디어를 구체화하고 정교하게 표현
아이디어 스케치 종류
•
섬네일 스케치: 아주 작은 크기로 빠르게 그리는 초안. 레이아웃과 구도를 잡는 데 유용•
스크래치 스케치: 거칠고 자유로운 형태의 스케치. 아이디어의 흐름을 빠르게 포착•
러프 스케치: 섬네일보다 구체적이지만 완성도는 낮은 중간 단계. 세부 사항을 추가하며 발전 4. 시안 제작
활용 제작 프로그램
이미지 편집 프로그램비트맵 이미지를 수정하고 보정하는 프로그램입니다.
•
포토샵 (Photoshop): 업계 표준 이미지 편집 도구. 사진 보정, 합성, 그래픽 디자인
•
페인터 (Painter): 자연스러운 브러시 표현에 특화된 디지털 페인팅 도구
•
페인트샵프로 (PaintShop Pro): 포토샵의 대안으로 사용되는 이미지 편집 프로그램
드로잉 프로그램벡터 기반의 그래픽을 제작하는 프로그램입니다.
•
일러스트레이터 (Illustrator): 벡터 그래픽 제작의 표준. 로고, 아이콘, 인쇄물 디자인
•
코렐 드로 (CorelDRAW): 일러스트레이터의 대안 벡터 그래픽 도구
애니메이션 프로그램움직이는 콘텐츠를 제작하는 프로그램입니다.
•
플래시 (Flash): 웹 애니메이션 제작 (현재는 Adobe Animate로 대체)
•
프리미어 (Premiere): 비디오 편집 프로그램
•
애프터이펙트 (After Effects): 모션 그래픽 및 시각 효과 제작
•
마야 (Maya): 3D 모델링, 애니메이션, 렌더링
•
3D MAX: 건축 시각화 및 3D 애니메이션
•
라이노 (Rhino): 정밀한 3D 모델링 도구
웹 에디터웹 페이지를 제작하고 편집하는 프로그램입니다.
•
드림위버 (Dreamweaver): WYSIWYG 방식의 웹 개발 도구
•
VS CODE (Visual Studio Code): 현대적인 코드 에디터. 다양한 확장 기능 지원
와이어프레임
웹사이트의 골격을 나타내는 기본 설계도입니다. 콘텐츠 배치, 기능, 내비게이션 구조를 단순화하여 표현합니다.
•
정보 구조 (IA) 시각화
•
사용자 인터랙션 흐름 설계
•
화면 구성 요소의 우선순위 결정
•
반응형 디자인을 위한 브레이크포인트 고려
레이아웃
그리드 (Grid)페이지를 규칙적으로 분할하여 일관성 있는 디자인을 구현합니다.
•
컬럼 기반 레이아웃 (12컬럼, 16컬럼 등)
•
정렬과 균형을 통한 시각적 안정감
•
반응형 그리드 시스템
여백 (Whitespace)요소 간의 공간으로 가독성과 집중도를 높입니다.
•
적절한 패딩(padding)과 마진(margin) 설정
•
시각적 휴식 공간 제공
•
콘텐츠 그룹화 및 계층 구조 표현
색상 (Color)브랜드 아이덴티티를 표현하고 사용자 감성을 자극합니다.
•
색상 이론: 보색, 유사색, 3색 배합
•
브랜드 컬러 시스템 구축
•
명도와 채도를 통한 계층 표현
•
접근성을 고려한 색상 대비 (WCAG 기준)