2027 웹디자인개발기능사 필기! 합격 필수 '디자인 구성요소 설계' 족집게 특강

파트 3: 디자인 구성 요소 설계 및 제작

챕터 1: 스토리보드 설계 및 제작

섹션 1: 정보 설계와 정보 구조

• 정보 설계란?

  • 웹사이트의 정보를 체계적으로 정리하고 구조를 만드는 거야.
  • 정보 종류: 사실, 개념, 절차, 원칙 등
  • 필요한 지식: 웹사이트 정보 구조 이해, 내비게이션 설계, 기능 이해, 도구 운용
  • 웹사이트 설계 요소: 회원가입, 로그인, 비밀번호 찾기, 프로필 관리, 검색, 내비게이션, 콘텐츠 관리, 문의, 알림 등

• 정보 체계화란?

  • 흩어진 정보들을 주제나 성격에 따라 그룹으로 묶고 정리하는 과정이야.
  • 과정: 콘텐츠 수집 → 그룹핑 → 조직화 → 구조화 → 계층 구조 설계 → 콘텐츠 구조 테스트
  • 방법:
    • 특징이 명확한 정보: 알파벳순, 날짜순, 위치순 등
    • 특징이 불명확한 정보: 주제, 기능, 이용자, 상징 의미순

• 정보 체계화의 주요소:

  • 정보 분류: 정보를 주제별, 기능별 등으로 체계적으로 정리하는 것.
  • 정보 구조화: 정리된 정보를 연결해서 웹사이트의 계층 구조를 만드는 것.
  • 레이블링: 웹페이지 정보 체계에 명확한 이름(메뉴, 제목 등)을 붙이는 것.
  • 내비게이션: 사용자가 정보를 쉽게 찾고 이동할 수 있도록 돕는 것.

• 정보 구조란?

  • 웹사이트의 정보, 콘텐츠, 기능을 체계적으로 조직하는 것.
  • 종류:
    • 계층 구조: 상위-하위 카테고리로 나누는 구조.
    • 허브 앤 스포크 구조: 중앙 페이지에서 여러 페이지로 이동하는 구조.
    • 중첩 인형 구조: 큰 페이지에서 세부 페이지로 단계별 이동하는 구조.
    • 대시보드: 다양한 정보를 한눈에 볼 수 있게 제공하는 구조.
    • 레이블링 구조: 각 정보에 레이블을 붙여 쉽게 탐색하게 하는 구조.

• 내비게이션이란?

  • 사용자가 웹페이지 내에서 쉽게 이동할 수 있도록 링크들을 모아 놓은 것.
  • 구성 요소: 내비게이션 바, 메뉴, 링크, 이미지 맵, 사이트 맵, 사이드 바, 바닥글 내비게이션 등.
  • 종류:
    • 고정 헤더: 항상 화면 상단에 보이는 메뉴.
    • 드롭다운 메뉴: 주 메뉴에서 하위 메뉴가 나타나는 구조.
    • 햄버거 메뉴: 아이콘을 눌러 메뉴를 펼치는 방식 (모바일에서 많이 사용).
    • 메가 메뉴: 메뉴 항목을 클릭하거나 마우스를 올리면 큰 콘텐츠 패널이 나타나는 구조.

섹션 2: 와이어프레임 작성과 레이아웃

• 와이어프레임이란?

  • 웹페이지의 구조와 레이아웃을 간단한 선과 사각형으로 그린 설계 도구.
  • 주요 UI 요소들의 배치와 구성을 보여주는 데 사용.
  • 실기 시험에도 자주 등장하는 요소.

• 레이아웃이란?

  • 콘텐츠를 적절하게 배치시킨 구조나 형태.
  • 구성 요소:
    • 헤더: 웹페이지 상단 (로고, 타이틀 등).
    • 내비게이션: 탐색 링크 모음.
    • 콘텐츠 영역: 주요 콘텐츠가 표시되는 곳.
    • 어사이드 영역: 부가 정보 제공 (광고, 바로가기 등).
    • 푸터: 웹페이지 하단 (로고, 저작권, 주소 등).
    • 광고 영역: 배너 형태로 표현.
    • 기타 영역 분할: 2단, 3단 등으로 나누어 구성.

• 웹사이트 레이아웃 구성 방법:

  • 중요 콘텐츠 먼저 배치.
  • 단순하고 간결하게, 사용자가 쉽게 찾도록 구성.
  • 콘텐츠 연결이 일관성 있고 논리적이어야 함.
  • 텍스트와 시각 요소 조화.
  • 여러 레이아웃 구성 후 사용자 테스트로 최종 선택.

• 레이아웃 종류:

  • 고정형: 너비가 픽셀 단위로 고정됨 (일관된 디자인, 큰 화면에서 작아 보일 수 있음).
  • 유동형: 너비가 퍼센테이지로 설정됨 (화면 크기에 따라 유연하게 조절, 구현 복잡, 가독성 문제 발생 가능).
  • 반응형: 특정 화면 크기별로 다른 스타일/레이아웃 제공 (최근 가장 많이 사용, 모든 디바이스에서 일관된 화면 제공).
  • 적응형: 특정 화면 크기에 맞춰 미리 정의된 여러 레이아웃 제공 (각 디바이스별 최적화).

섹션 3: 스토리보드 작성

• 스토리보드란?
  • 웹사이트 전체 구성을 시각적으로 보여주는 작업 지침서.
  • 장점: 이해하기 쉬움, 시행착오 감소, 팀원 간 소통 원활, 작업 시간 효율적 관리, 고객에게 아이디어 명확 전달.
  • 작성 내용: 표지, 개정 이력, 서비스 흐름도, 사용자 여정/상호작용, 페이지별 상세 정보, 디자인 요소(색상, 배치), 기능/요구사항, 기술적 요구사항, 제약 조건 등.
  • 핵심: 와이어프레임에 시나리오를 포함시켜 구성.

챕터 2: 심미성 사용성 설계 및 구성

섹션 1: 디자인의 의미와 조건

• 디자인 용어 유래: 라틴어 '데시그나레' (계획, 표현, 목적)에서 유래.
• 디자인의 의미: 조형에 대한 계획 + 목적에 부합하는 설계.
• 디자인의 4대 조건:
  • 목적성 (한 목적성): 대상과 용도에 맞게 기능성과 실용성을 갖춘 것.
  • 경제성: 최소 비용으로 최대 효과를 얻는 합리적인 가격.
  • 심미성: 형태와 색채의 조화로 아름다움을 만드는 것 (시대, 사회에 따라 변화).
  • 독창성: 다른 제품과 차별화된 창조적이고 주목할 만한 디자인.
• 디자인의 5대 조건: 위 4대 조건 + 질서 (균형과 조화 유지).
• 굿 디자인: 4대 조건(또는 5대 조건)을 만족시키면서 외적인 독창성과 편리함을 갖춘 디자인.
• 디자인 발상 단계: 모방 → 수정 → 적응 → 혁신.
• 디자인 과정: 발의 → 확인 → 조사 → 분석 → 종합 → 평가 → 개발 → 전달.
• 디자인 분류 (주요): 시각 디자인 (시각 전달 디자인) - 2차원 디자인.
  • 아이덴티티: 기업의 통합 전략.
  • 브랜드 아이덴티티: 기업의 본질을 포착하고 전달하여 방향을 나타내는 것 (로고, 슬로건, 캐릭터 등).
  • CI (Corporate Identity): 기업의 정체성을 시각적으로 표현.
  • CP (Corporate Program): CI를 관리하고 유지하기 위한 프로그램.
• 디자인 역사 (중요): 미술공예 운동, 아르누보, 독일공작연맹, 데스틸, 바우하우스.

섹션 2: 디자인 구성 요소

• 웹사이트 디자인 요소: 배치/레이아웃, 색상, 타이포그래피, 이미지/그래픽, 내비게이션 등.
• 조형 요소:
  • 개념 요소: 눈에 보이지 않지만 인지되는 요소 (점, 선, 면, 입체).
    • 점: 형태의 최소 단위.
    • 선: 점의 이동 자취, 1차원 요소.
    • 면: 선의 집합, 2차원 요소.
    • 입체: 면의 이동 자취, 3차원 요소.
  • 시각 요소: 눈으로 지각할 수 있는 요소 (형, 형태, 크기, 색채, 질감).
    • 형: 2차원 경계를 가진 물체의 윤곽.
    • 형태: 3차원적인 모습 (이념적 형태, 현실적 형태).
    • 크기: 길이, 폭, 깊이, 높이 등.
    • 색채: 색상, 명도, 채도.
    • 질감: 광택, 매끄러움, 거침 등 (촉각, 시각).
  • 상관 요소: 디자인 요소 결합 시 나타나는 연관 속성 (위치, 방향, 공간감, 중량감).
• 웹사이트 그래픽 요소: 그래픽 이미지, 아이콘, 픽토그램.
• 디자인의 원리:
  • 균형: 시각적 무게 중심을 이루어 안정감을 주는 것 (대칭).
  • 조화: 각 요소가 잘 어울려 일관성을 이루는 것.
  • 대비: 요소 간 차이를 주어 강조하는 것 (명확성, 강조).
  • 강조: 일부 요소를 다르게 표현하여 주목시키는 것 (흥미 유발).
  • 리듬: 일정한 패턴이나 주기를 통해 시각적 흐름을 만드는 것 (반복, 교차).
  • 비례: 전체와 부분 간의 크기나 양적 관계 (황금비례).
  • 통일: 하나의 규칙으로 단일화하는 것 (질서).
  • 동세: 디자인 요소에 생동감과 활력을 주는 것.
• UI/UX 심리학:
  • 착시: 사물을 실제와 다르게 지각하는 것.
  • 게슈탈트 법칙:
    • 근접성: 가까이 있는 요소는 하나의 그룹으로 인식.
    • 유사성: 비슷한 요소는 같은 그룹으로 인식.
    • 연속성: 선이나 곡선을 따라 배열되거나 진행 방향이 비슷하면 하나로 인식.
    • 폐쇄성: 닫혀 있지 않은 도형을 닫아서 하나의 형태로 인식.
    • 대칭성: 대칭적인 요소는 하나의 그룹으로 인식.
    • 정경 배경: 뚜렷한 것은 정경, 나머지는 배경으로 인식.
    • 공통 운명: 같은 방향으로 움직이는 요소는 하나의 그룹으로 인식.
  • 착시 종류: 반전/명도, 각도/방향, 크기, 속도, 길이, 색채/명암 대비, 상방 거리 과대, 수평/수직, 반전 실체.

섹션 3: 그리드 시스템 및 반응형 디자인

• 그리드 시스템: 수직/수평 가상 격자로 디자인 요소를 정돈되고 균형 있게 배치하는 가이드라인.
  • 구성 요소: 컨테이너, 컬럼, 거터, 마진, 모듈.
  • 유형: 3등분, 황금 비율, 열 그리드, 기준선 그리드.
• 반응형 디자인: 다양한 장치와 화면 크기에서 최적의 사용자 경험을 제공하도록 설계하는 것.
  • 주요 기술: 반응형 레이아웃, 반응형 그리드, 뷰포트 설정, 미디어 쿼리, 유연한 이미지/미디어, 반응형 타이포그래피, 로딩 속도 최적화.
  • 반응형 레이아웃 종류: 유동형, 컬럼 드롭, 레이아웃 시프트, 미세 조정, 오프 캔버스.

섹션 4: UX 적용 및 UI 설계

• UX 디자인: 사용자가 제품/서비스 사용 시 얻는 총체적인 경험을 설계하는 것.
  • 과정: 과업 분석 → 사용자 조사/분석 → 정보 구조 설계 → 와이어프레임 생성 → 프로토타입 제작 → 사용성 테스트 → 피드백 반영/개선 → 구현/출시 → 지속적 개선.
  • 사용자 조사/분석 방법: 설문 조사, 인터뷰, A/B 테스트, 포커스 그룹 인터뷰(FGI), 코호트 분석, 히트맵 분석, 친화도 다이어그램, 카드 정렬.
  • 분석 도구 활용: 웹사이트/앱 사용 데이터 분석.
  • 사용성 테스트: 실제 사용자 관찰을 통해 문제점 파악 및 개선.
  • 사용자 여정 지도 (User Journey Map): 사용자가 제품/서비스를 사용하는 과정을 시각적으로 표현.
  • 경험 지도: 사용자가 상호 작용하는 동안 겪는 전체 경험을 시각적으로 표현 (페르소나, 타임라인, 터치 포인트, 채널, 감정 상태, 페인포인트, 인사이트).
• UX 제스처 종류: 프레스, 롱 프레스, 스크롤, 드래그, 풀 투 리프레시, 탭, 더블 탭, 핀치.
• 디자인 싱킹 (UX 디자인 적용): 공감 → 정의 → 아이디어 도출 → 프로토타입 → 테스트.
• 허니콤 모델 (UX 디자인 구성/우선순위): 유용성, 사용성, 신뢰성, 검색 가능성, 접근성, 매력성, 가치성.
• 페르소나: 사용자의 특성과 자지를 반영한 가상의 사용자 캐릭터.
• UI (User Interface): 웹사이트, 모바일 등의 화면에서 구현되는 사용자 환경.
  • UI 디자인 사용성 휴리스틱: 시스템 상태 가시성, 현실 세계 일치, 사용자 제어/자유, 일관성/표준, 오류 방지, 기억보다 인식, 유연성/효율성, 미니멀 디자인, 오류 인식/진단/복구, 도움말/문서 제공.
  • UI 그룹화: 관련된 UI 요소를 논리적으로 묶어 신속성, 효율성, 재사용성, 일관성, 가독성, 유지보수 용이성 증대.
• 기타 UX/UI 용어: 피델리티, 어포던스, 애자일, 브레드크럼, 피그마, 어도비 XD, 유저 플로우, 목업, 다크 패턴, 컬러 팔레트, 햄버거 버튼, 공백, GUI.

섹션 5: 2D/3D 디자인 소프트웨어 활용

• 2D 소프트웨어: 2차원 그래픽 제작/편집 도구 (이미지, 아이콘, 로고, UI 요소 등).
  • 과정: 구상 → 툴 선택 → 색상 선택 → 기능 선택 → 표현.
  • 종류: 일러스트레이터, 포토샵, 코렐드로, 스케치, 피그마, 플래싱.
• 3D 소프트웨어: 3차원 공간 모델링, 시뮬레이션, 렌더링 도구.
  • 과정: 모델링 → 렌더링 → 투영 → 클리핑 → 음영 처리 → 쉐이딩 → 매핑 → 완성.
  • 3D 모델링 종류: 와이어 프레임, 버텍스, 서페이스, 솔리드, 파라메트릭, 프렉탈, 파티클 모델.
  • 3D 렌더링 용어: 투영, 클리핑, 음면 처리, 쉐이딩 (플랫, 고러드, 퐁, 메탈), 매핑.

챕터 3: 매체성 구성 요소의 설계 및 제작

섹션 1: 디바이스별 특성 및 디자인

• 웹: 문자, 소리, 영상 등으로 정보 전달 및 검색 지원 (웹 문서 형식, 단위, 정보 연결, 검색 도구).
• 모바일: 이동성 있는 IT 기기 (상시성, 올인원 기능, 즉시 접수성, 실시간).
• 태블릿: 휴대폰과 노트북 장점 결합 (휴대성, 조작 편의성, 넓은 화면, 상시 전원, 직관적 인터페이스).
• 키오스크: 공공 장소 무인 단말기.
• 웹 브라우저: 웹사이트 상호 작용 프로그램 (HTML/CSS 렌더링, 자바스크립트 실행, 멀티미디어 처리, 보안, 확장성, 표준 준수).
  • DOM (Document Object Model): 웹 브라우저가 HTML/XML 문서를 구조화하고 조작하는 인터페이스.
  • 종류: 크롬, 파이어폭스, 엣지, 사파리.
  • 해상도: 1920x1080 (Full HD), 4K UHD.
• 웹 안전 색상: 운영 체제, 브라우저, 플랫폼에 상관없이 일관되게 표시되는 216가지 색상.
• 모바일 디자인 용어: 디바이스 픽셀, CSS 픽셀, DPI, HTML 메타태그 (뷰포트).

섹션 2: 웹 표준 및 웹 표준 검사

• 웹 표준: 웹 기술 관련 기본 원칙과 지침 정의 (호환성, 접근성, 유지보수성, 검색 엔진 최적화).
• 웹 표준 스펙: HTML, XML, XHTML, CSS, JavaScript, WAI-ARIA.
• 웹 표준 검사: 웹 문서가 W3C 표준을 준수하는지 확인 (HTML/XHTML 유효성 검사: 마크업 밸리데이션 서비스, CSS 유효성 검사: CSS 밸리데이션 서비스).

섹션 3: 웹 접근성

• 웹 접근성: 모든 사용자가 웹사이트/애플리케이션을 쉽게 이용할 수 있도록 보장하는 것.
  • 도구: 라이트하우스, 웨이브.
  • 주요 원칙: 인식 가능성, 운용 가능성, 이해 가능성, 견고성.
• 웹 접근성 품질 인증: 장애인, 고령자 등 취약 계층이 편리하게 이용할 수 있는 우수 사이트 인증 제도.