2027 웹디자인개발기능사 필기, 프로토타입 핵심 이론 완벽 정복!

프로토타입 기초 데이터 수집 및 스케치 정리

파트 1: 프로토타입 기초 데이터 수집 및 스케치

챕터 1: 기초 데이터와 레퍼런스

섹션 1: 기초 데이터와 레퍼런스 데이터 수집

• 프로토타입이란?

  • 최종 제품을 미리 만들어보고 사용자가 어떻게 쓸지 테스트해보는 시뮬레이션 모델 또는 시제품이야.
  • 프로토타입을 만들려면 사용자가 뭘 원하는지(니즈), 시장이 어떻게 변하는지 알아야 해.
  • 이런 걸 알아내는 과정을 기초 데이터 수집 또는 레퍼런스 조사 분석이라고 해.

• 기초 데이터

  • 사용자 요구사항, 시장 조사, 기술 요구사항 등 프로젝트의 기본이 되는 모든 정보야.

• 레퍼런스

  • 프로젝트나 디자인할 때 참고할 수 있는 모든 자료를 말해.
  • 예시: 디자인할 때 참고하는 색깔(컬러 팔레트), 글씨체(타이포그래피), 아이콘, 배치(레이아웃) 등.
  • 왜 조사할까?
    • 최신 유행(트렌드)을 파악해서 디자인에 영감을 얻거나,
    • 정해진 규칙(산업 표준, 디자인 가이드라인)을 지키기 위해서야.

• 기초 데이터 수집 방법 (3가지)

  1. 설문 조사:

     • 모두에게 똑같은 질문지를 주고 여러 명에게 한 번에 물어볼 수 있어.
     • 글이나 온라인으로 답을 받을 수 있고, 사람이 많을 때 좋아.
     • 돈이랑 시간을 아낄 수 있고, 익명으로 할 수도 있어.
     • 단점: 질문이 정해져 있어서 답이 제한될 수 있어.
     • 예시: 서베이몽키, 구글 폼, 타입폼 같은 도구를 많이 써.

  2. 인터뷰:

     • 설문 조사보다 더 깊은 정보나 개인적인 생각을 알 수 있어.
     • 직접 만나거나 전화, 온라인으로 1:1 대화하듯이 진행해.
     • 깊이 있는 정보와 상세한 답변을 얻을 수 있고, 사람의 생각이나 감정을 잘 이해할 수 있어.
     • 단점: 시간과 돈이 많이 들고, 상대방의 적극적인 협조가 필요해.

  3. 관찰 조사:

     • 사용자가 실제로 행동하는 것을 보고 데이터를 얻는 거야.
     • 직접 현장에 가서 상황을 보고 기록해.
     • 예시: 웹사이트 프로토타입을 만들고 사용자가 테스트할 때, 어디서 어려워하는지, 얼마나 걸리는지 등을 관찰하고 기록하는 거지.
     • 실제 상황을 생생하게 볼 수 있고, 자연스러운 행동을 관찰해서 믿을 만한 데이터를 얻을 수 있어.
     • 단점: 일일이 기록해야 해서 시간이 많이 걸리고, 관찰하는 사람의 주관이 들어갈 수 있어.
     • 주로 사용자 경험(UX) 조사나 사회 행동 연구에 쓰여.

• 데이터 수집 내용

  • 경쟁사 조사, 시장 트렌드 조사, 기술 요구사항, 프로그래밍 언어, 개발 도구, 브라우저 호환성 등.

• 레퍼런스 조사 분석

  • 시장과 기술 변화를 이해하고, 고객 요구사항을 파악해서 웹사이트 설계에 반영하는 데 도움을 줘.
  • 도움 되는 점:
    • 프로토타입 만들 때 아이디어를 발전시킬 수 있어.
    • 비슷한 문제의 해결책을 찾을 수 있어.
    • 디자인의 일관성과 완성도를 높일 수 있어.
    • 사용자 경험을 개선할 수 있어.
  • 시작하기 전에: 어떤 레퍼런스가 필요한지, 무엇을 얻고 싶은지 목표를 명확히 해야 해.
  • 조사 내용:
    • 글로벌 트렌드, 이머징 이슈: 사회적으로 큰 영향을 주는 최신 유행이나 기술 동향을 조사해.
    • 경쟁사 분석: 다른 회사들이 어떻게 하고 있는지 보고 배우는 거야.
    • 우수한 디자인 분석: 잘 만들어진 디자인을 분석해.
    • 사회, 문화, 심리적 트렌드: 사람들이 뭘 좋아하고 어떤 영향을 받는지 파악해.
  • 시각화: 조사한 내용을 차트, 그래프, 인포그래픽 등으로 만들면 보기 쉽고 이해하기 쉬워. 이걸로 팀원이나 고객과 소통하기 좋아.
  • 조사 방법:
    • 비언어적 요소 조사: 논문, 기사, 관찰, 인터뷰 등으로 사람들이 생각하는 느낌이나 생각을 알아내.
    • 정보 검색 기술: 학술 데이터베이스, 인터넷, SNS 등을 활용해서 정보를 찾아.

• 경쟁사 분석 (매우 중요!)

  • 경쟁사의 장단점, 전략을 파악해서 우리 회사의 경쟁력을 높이는 거야.
  • 주요 내용:
    • 경쟁사 식별: 우리와 경쟁하는 회사가 누구인지 파악해.
    • 제품/서비스 분석: 품질, 가격, 기능 등을 비교해.
    • 웹사이트 분석: 디자인(UI), 색깔, 사용자 경험(UX), 콘텐츠, 기능, 검색 엔진 최적화(SEO) 등을 분석해.
    • 고객 리뷰/피드백 분석: 사람들이 경쟁사에 대해 어떻게 말하는지 봐.
  • 분석 방법:
    1. SWOT 분석: 우리 회사의 강점(Strength), 약점(Weakness), 기회(Opportunity), 위협(Threat)을 분석하는 거야.
    2. 벤치마킹: 잘하는 회사의 좋은 점을 보고 우리 회사에 적용하는 거야. (단순 복제가 아니라 응용!)
    3. 시장 조사: 경쟁사 웹사이트 방문자 수, 사용자 만족도, 브랜드 인지도 등을 조사해.
    4. 웹사이트 디자인 분석: 디자인, UX, 색깔, 레이아웃 등을 분석해.
  • 경쟁사 분석을 하면 좋은 점:
    • 우리 회사 제품의 전략적 우위를 확보할 수 있어.
    • 위험 요소를 미리 파악하고 관리할 수 있어.
    • 고객을 더 잘 이해할 수 있어.

• 웹사이트 사용자 유형

  • 프로슈머 (Prosumer): 생산자(Producer)와 소비자(Consumer)의 합성어로, 소비하면서 동시에 생산에도 참여하는 능동적인 사용자를 말해. (엘빈 토플러가 말한 개념!)
    • 웹사이트 개발 초기부터 결과물까지 의견을 주고, 콘텐츠를 직접 만들거나 홍보해주기도 해.
  • 일반 사용자: 기본적인 사용자.
  • 정보 탐색자: 정보를 찾거나 질문에 대한 답을 얻기 위해 웹사이트에 오는 사람.
  • 충성 고객 (Loyal Consumer): 웹사이트를 아주 좋아하고 자주 방문하며, 회원 가입, 뉴스레터 구독, 피드백 제공 등에 적극적인 고객.
  • 피드백 제공 사용자: 의견이나 아이디어를 주는 사용자.
  • 인플루언서: 영향력이 있는 사용자로, 링크 공유, 리뷰 작성, 콘텐츠 제작 등을 통해 웹사이트를 홍보해줘.
  • 콘텐츠 제작 사용자: 직접 콘텐츠를 만들어 제공하는 사용자.
  • 지원 요청자: 고객 지원을 받거나 문제 해결을 위해 방문하는 사용자.
  • 구독자: 뉴스레터, 프리미엄 콘텐츠 등을 받기 위해 구독하는 사용자.

섹션 2: 프로젝트 개념과 구조

• 프로젝트란?

  • 정해진 기간 동안 특별한 제품, 서비스, 결과를 만들기 위한 일시적인 노력이나 활동이야. (웹사이트 개발뿐 아니라 모든 프로젝트에 해당)
  • PMBOK (프로젝트 관리 지식 체계): 프로젝트 관리에 대한 지침을 제공하는 유명한 지침서야.
    • 5가지 프로세스 그룹: 착수 → 계획 → 실행 → 감시 및 통제 → 종료 단계로 진행돼.
    • 10가지 지식 영역: 통합 관리, 범위 관리, 일정 관리 등 프로젝트 진행 시 알아야 할 지식들을 다루고 있어.

• 프로젝트의 특징 (3가지)

  1. 고유성: 일상적인 업무와 다른, 특별한 결과물을 만들어내.
  2. 일시성: 시작과 끝이 정해져 있어. 목표 달성 시 종료돼.
  3. 점진적 상세화: 초기에는 대략적이었다가 진행될수록 내용이 구체적이고 상세해져.

• 웹사이트 개발 프로세스 (PMBOK 기반)

  1. 프로젝트 기획: 웹사이트 전체 개발 과정을 계획해.
  2. 웹사이트 계획: 실제 만들기 전에 어떻게 만들지 구체적으로 계획해.
  3. 사이트 구축 디자인 및 개발: 디자인하고 실제로 코딩하는 단계야.
  4. 테스트 및 디버깅: 오류를 찾고 수정하는 단계. 사용자 테스트도 포함돼.
  5. 배포 및 유지보수: 웹사이트를 공개하고 관리하는 단계야.

• 프로젝트 관련 용어

  • 프로젝트 성과: 프로젝트가 끝난 후 얻는 최종 결과.
  • 포트폴리오: 전략적 목표 달성을 위해 모아 관리하는 프로젝트, 프로그램, 운영 등의 집합.
  • 제품: 프로젝트 결과물 중 하나로, 생산되고 완성된 형태의 산출물.
  • 프로그램: 여러 관련된 프로젝트를 조정하여 관리하는 집합.
  • 프로젝트 관리자 (PM): 프로젝트 목표 달성을 책임지고 팀을 이끄는 사람.
  • 프로젝트 팀: 프로젝트 작업을 수행하는 개인들의 집합.
  • 프로젝트 가치: 프로젝트 결과물을 통해 조직이나 고객이 얻는 이점이나 혜택.

• 프로젝트 관련 문서

  • 제안 요청서 (RFP - Request For Proposal): 프로젝트를 발주하는 기관이 "이런 프로젝트를 하고 싶으니 제안서를 내주세요"라고 제시하는 문서. (요구사항, 범위, 평가 기준 등을 안내)
  • 제안서 (Proposal): 프로젝트를 수행하려는 업체가 RFP에 맞춰 "우리가 이렇게 프로젝트를 잘 할 수 있습니다"라고 제출하는 문서. (계획, 수행 능력, 예산, 기대 효과 등을 포함)
  • 프로젝트 계획서: 제안서가 승인된 후, 프로젝트를 상세하게 진행하기 위해 작성하는 계획서.
  • 프로젝트 최종 보고서: 프로젝트가 끝난 후 전체 과정을 정리하고 성과를 평가하는 보고서.

• 마르미 아키텍처 (MARMI Architecture)

  • 한국형 정보 시스템 개발 방법론. 국내 개발 환경에 맞춰 개발 과정을 체계적으로 관리해줘.
  • 마르미 3: 컴포넌트 기반 개발(CBD)을 제시.
  • 컴포넌트 기반 개발 (CBD - Component Based Development): 미리 만들어진 기능 덩어리(컴포넌트)를 가져다 프로그램을 만드는 방식. 레고 블록처럼 재사용 가능하고 개발이 간편해져.
  • 마르미의 7단계: 개발 계획 → 요구 분석 → 기본 설계 → 상세 설계 → 구축 → 테스트 → 설치 및 인도.
  • 특징: 국제 표준 준수, 개발 공정 계층화, UML 기반, 위험 관리, EJB 기반.
  • UML (Unified Modeling Language): 시스템 개발 시 객체지향 설계를 시각적으로 표현하는 국제 표준 모델링 언어. (클래스 다이어그램, 시퀀스 다이어그램 등)
  • 마르미 3 구성: 개요서, 절차서, 기법서, 양식 정의서, 적용 사례서.

• WBS (Work Breakdown Structure - 작업 분해 구조)

  • 프로젝트를 작은 작업 단위로 나누어 체계적으로 관리하는 방법.
  • 주요 요소: 프로젝트 목표, 주요 단계, 작업 패키지, 작업 할당.
  • 특징: 계층적 구조, 책임 분담, 진척 관리, 자원 배분.
  • 작성 및 일정 수립 과정:
    1. WBS 작성 (작업 세분화)
    2. 작업 순서 결정 및 의존성 정의
    3. 작업 기간 추정
    4. 팀원 및 자원 배정
    5. 스케줄링 도구 활용 (간트 차트 등)으로 타임라인 시각화.

섹션 3: 산업 재산권과 저작권

• 산업 재산권

  • 상업적 또는 산업적 활동과 관련된 지적 재산권. 혁신적인 아이디어를 보호하고 경제적 이익을 얻게 해줘.
  • 종류:
    1. 특허권: 고도의 발명에 대한 권리 (출원 후 20년 보호).
    2. 상표권: 브랜드명, 로고 등 특정 상품/서비스에 대한 권리 (등록 후 10년 보호, 갱신 가능).
    3. 디자인권: 제품의 외관이나 형태에 대한 권리 (등록 후 15년 보호).
    4. 실용신안권: 작은 개선이나 기술적 소발명에 대한 권리.

• 저작권

  • 창작자가 자신의 창작물(저작물)에 대해 가지는 배타적인 권리.
  • 저작자에게 발생하는 권리:
    • 저작 인격권: 명예와 관련된 비재산적 권리. (공표권, 성명표권, 동일성 유지권 포함)
      • 공표권: 저작물을 공개할 권리.
      • 성명표권: 자신의 이름을 표시할 권리.
      • 동일성 유지권: 저작물의 내용을 그대로 유지할 권리. (내용을 함부로 바꾸지 못하게 함)
    • 저작 재산권: 저작물을 통해 경제적 이익을 얻을 수 있도록 보호하는 권리. (금전적 가치가 있음)
      • 복제권, 배포권, 공연권, 공중 송신권, 전시권, 대여권, 2차적 저작물 작성권 등 포함.
  • 저작 인접권: 실연자, 음반 제작자, 방송 사업자 등 저작자와 관련된 사람들에게 주어지는 권리. (가수, 연주자 등)
  • 저작 재산권 제한: 공공의 이익을 위해 특정 상황에서는 저작자의 권리가 제한될 수 있어.
    • 예시: 사적 복제, 보도, 비평, 교육, 도서관 보관, 장애인 지원 등.
  • 소프트웨어 라이선스: 저작권자가 타인에게 저작물 사용 권한을 부여하는 계약. (소프트웨어 복제, 배포, 수정 권한 등 규정)
    • 프리웨어: 무료로 사용할 수 있는 라이선스 (단체/상업적 이용 시 제한될 수 있음).
  • 워터마크: 디지털 데이터에 숨겨진 정보로, 저작권 보호 및 불법 복제 방지를 위해 사용. (가시적 워터마크: Copyright 표시 / 비가시적 워터마크: 메타데이터, 픽셀 값 등)
  • DRM (Digital Rights Management): 디지털 콘텐츠의 저작권을 관리하고 불법 복제를 방지하는 기술. (사용료 부과, 사용 기한 제한 등)
  • CCL (Creative Commons License): 저작권자가 일정한 조건 하에 저작물 이용을 허락하는 라이선스.
    • 픽토그램:
      • 사람 모양: 저작자 표시 (원작자 표시)
      • 달러 표시 사선: 비영리 목적 사용만 허용
      • 등호 모양: 변경 금지 (그대로 사용)
      • 화살표 반대 방향: 동일 조건 하에서만 변경 허락 (2차 저작물 작성 시 동일 라이선스 적용)

챕터 2: 아이디어 스케치

섹션 1: 프로젝트 기획 의도와 아이디어 스케치

• 프로젝트 기획 의도

  • 프로젝트의 목표와 방향을 명확히 정의하고, 모든 이해 관계자에게 목적과 기대 효과를 전달하는 것.

• 아이디어 스케치

  • 프로젝트 초기 단계에서 기획 의도를 그림으로 빠르게 표현하는 것.
  • 종류:
    • 썸네일 스케치: 간단하게 메모하듯이 그리는 스케치.
    • 스크래치 스케치: 플로우 차트나 조직도 등으로 표현.
    • 러프 스케치: 말 그대로 러프하게 그리는 스케치.

• 아이디어 발상법

  • 아이디어를 도출하기 위한 다양한 기법. 디자인 컨셉 형성에 활용.
  • 대표적인 방법:
    • 브레인스토밍: 머릿속 아이디어를 자유롭게 쏟아내는 기법. 비판 금지, 양 많이 내는 것이 중요.
    • SCAMPER: 기존 아이디어를 대체, 결합, 응용, 변경, 다른 용도로 사용, 제거, 재배열하는 질문을 통해 아이디어를 발상.
    • HMW (How Might We) 기법: "우리가 어떻게 하면 ~할 수 있을까?"라는 질문을 통해 문제 해결 아이디어 도출.
    • 연상 결합법: 관련 없는 것들을 연상시키고 결합하여 아이디어 도출.
    • 입출력법 (Input-Output System): 주어진 문제(Input)를 해결하여 도달해야 하는 지점(Output)을 설정하고 아이디어 도출.
    • 시네틱스법: 관련 없어 보이는 요소를 결합하거나 의인화, 상징화하여 아이디어 도출.
    • 고든법: 짧은 키워드만 제시하고 자유롭게 아이디어를 펼쳐 나가는 방법.
    • 체크리스트법: 다양한 항목을 체크리스트로 만들어 검토하고 분석하는 방법.

섹션 2: 컨셉 시각화

• 컨셉 시각화
  • 아이디어나 개념을 시각적으로 표현하여 명확하게 전달하는 과정.
  • 방법:
    • 스케치: 초기 구상을 시각적으로 나타냄.
    • 다이어그램: 개념 간의 관계를 시각적으로 보여줌.
    • 스토리보드: 시나리오에 따라 각 단계를 그림으로 표현. (사용자 흐름 시뮬레이션)
    • 프로토타입: 실제 테스트 가능한 시제품. 와이어프레임 → 모형 → 프로토타입 순서로 진행.
    • 인포그래픽: 텍스트, 이미지, 그래프를 결합한 시각 자료.
  • 장점: 정보 전달 용이, 이해하기 쉬움, 의사 결정 시간 단축, 트렌드 식별 가능.
  • 요소:
    • 컬러: 첫인상, 연상 작용에 영향.
    • 이미지: 키워드를 구체화 (사진, 그림, 동영상 등).
    • 타입 (서체): 본문 내용 전달.
    • 레이아웃: 텍스트, 이미지, 그래픽 요소의 시각적 배열.