본문 바로가기

Study/Publishing

[웹디자인기능사] 필기 41 컴퓨터 그래픽스 개념 및 정의 ~ 45 웹 페이지 기획

728x90

3과목 웹 그래픽스 디자인

41. 컴퓨터 그래픽스 개념 및 정의

 

1. 컴퓨터 그래픽스(Computer Graphics)의 개념

  • 넓은 의미로 컴퓨터를 이용한 모든 이미지와 영상을 의미함
  • 컴퓨터를 이용한 도형이나 화상을 작성하는 기술
  • 유망한 첨단 분야가 되고 있음
  • 인간의 상상력을 무한히 표현 가능하게 하는 방법 중 하나
  • 컴퓨터의 하드웨어와 소프트워어를 이용하여 도형, 그림, 사진 이미지 등의 시각적 이미지를 만들어 내고 디지털화(Disitalize) 시키는 것
  • 컴퓨터 그래픽스는 크게 2D 그래픽스와 3D 그래픽스로 나눌 수 있음
  • 영화나 영상물 등의 멀티미디어 분야에서 가장 효과적으로 활용되고 있음
  • 디자인과 순수예술, 영상산업 등 광범위한 활용영역을 가짐
  • 단순ㆍ반복 작업을 편리하게 할 수 있음
  • 사용자가 그래픽 프로그램을 이용하여 작업을 함
  • 아이디어의 표현도구로 가장 많이 이용되는 디자인 도구

2. 컴퓨터 그래픽스의 특징

  • 색상을 마음대로 표현하거나 변경할 수 있음
  • 실제로 나타낼 수 없는 부분까지 표현 가능
  • 디자인 의도대로 명도나 질감 표현 가능
  • 시간과 공간에 제약이 없음
  • 제작물 수정 가능
  • 아주 미세한 부분까지 표현 가능
  • 작업 데이터의 이동 및 보관이 간편함
  • 색상 및 재질의 수정이 자유로워 비용이 절감됨

3. 좌표계

컴퓨터 그래픽에서 객체의 위치를 정확히 표현하기 위해 사용

 

4. 극 좌표계

좌표 위에 있는 점과 원점으로 규정하는 기준점과의 거리와 각도의 크기에 따라 좌표를 정의하는 좌표계

 

5. 그라데이션(Gradation)

2차원 컴퓨터 그래픽스에서 한 색상에서 다른 색상으로 점차적으로 색을 변화시켜가며 특정 구역 안에 색을 칠해주는 기법

 

 

42. 컴퓨터 그래픽스의 역사와 특징

 

컴퓨터 그래픽스(Computer Graphics)의 시대별 발달 과정

1세대 진공관 시대 1946년
~ 1950년 말
- 에니악(ENIAC) 개발 : 미국의 '에커드'와 '모클리'에 의해 개발된 세계 최초의 컴퓨터
-윌윈드(Whirlwind)는 1949년 MIT에서 개발되었으며 수학적 데이터를 그래픽으로 표현한 컴퓨터
- XY 플로터 시대
2세대 트랜지스터 시대 1950년 말
~ 1960년 중반
본격적인 진공관의 일종인 리플레시형 CRT 시대(Cathhode Ray Tube)
3세대 집적회로 시대 1960년
~ 1970년 초
- 제조업 분야에 CAD와 CAM 도입
- TV와 영화에 컴퓨터 그래픽스가 이용되면서 사실적 생동감 있는 표현을 중요하게 생각함
 - 만델브로(B.B.Mandelbrot)가 프랙탈 이론(Fractal Theory) 발표
- 마이크로소프트 설립
- 스토리지형 CRT 시대
- 벡터 스캔 CRT 보급
4세대
고밀도 집적회로 시대
1970년
~ 1980년 말
- 고밀도 직접 회로(LSI) 개발로 컴퓨터가 소형화되면서 개인용 컴퓨터(PC) 등장
- 컴퓨터 그래픽스 전성기
- 래스터 스캔 CRT 시대
- 1980년대 고밀도 집적회로(LSI), 초고밀도 집적회로(VLSI) 시대
5세대
초고밀도 집적회로 시대
1980년 말
~ 현재
- 1990년대를 시작으로 수퍼 고밀도 집적회로(SVLSI), ULSI, GUI 시대
- 컴퓨터를 통해 영상, 음성, 매체 등의 정보를 각 개인이 자유로이 이용할 수 있는 종합적인 컴퓨터 기술인 멀티미디어가 발전
- GUI가 본격적으로 시작됨
- 3D 그래픽스 발전
- 인공지능 시대

 

43. 컴퓨터 그래픽스의 원리와 활용

 

1. 해상도(Resolution)

이미지를 표현하는데 몇 개의 픽셀(Pixel) 또는 도트를 나타내었는지 그 정도를 의미함

 

2. 컬러 시스템

RGB - Red, Green, Blue
- 빛(색광)의 혼합 방식인 가산혼합으로 색상을 표현
- 웹에서 주로 사용하는 컬러 방식
- 빛의 3원색으로 표현하는 컬러 시스템
- R=0, G=0, B=0로 설정할 때 모니터 색상은 블랙
- R=255, G=255, B=255로 설정할 때 모니터 색상은 화이트
CMYK - Cyan, Magenta, Yellow, Black
- 감산혼합
- 인쇄물을 위한 프린터의 방식
HSB 컬러 Hue(색상)과 Saturation(채도), Brightness(밝기)로 색을 표현
HSV 컬러 Hue(색상), Saturation(채도), Value(명도)의 좌표를 써서 특정한 색을 지정
그레이 스케일
(Grayscale)
- 흑백(흑색조)으로만 표현
- 최대 비트 심도(Bit Depth)는 8비트

 

 

44. 컴퓨터 그래픽스 시스템

 

1. 컴퓨터 그래픽스 시스템 하드웨어

  • CPU
    인간의 두뇌에 해당하는 것으로 대부분의 계산과 판단을 수행하는 컴퓨터 그래픽스 시스템 하드웨어
  • 자기 테이프
    • 많은 양의 정보를 기록하기 위한 테이프 형식의 외부기억장치
    • 접근 속도는 느리지만 용량에 비해 가격이 저렴하여 대형 컴퓨터의 보조기억 장치에 이용됨
    • 순차접근만 되면 데이터 백업용으로 적합함

2. 입력장치

  • 사용자가 원하는 문자, 기호, 그림 등의 데이터 또는 명령(프로그램)을 컴퓨터 내부의 메모리에 전달하는 장치
  • 입력장치의 종류 : 키보드, 마우스, 스캐너, 터치스크린, 태블릿, 라이트 펜, 디지타이저(Digitizer), 조이스틱(Joy Stick) 등

3. 출력장치

  • 그래픽 정보를 외부로 출력하는 것으로 처리장치를 통해 처리된 결과는 출력장치를 통해 나타냄
  • 출력장치의 종류 : 모니터, 빔 프로젝트, 프린터, 플로터(Plotter) 등

 

45. 웹 페이지 기획

 

1. 웹 페이지 제작 시 제안서에 포함될 내용

  • 프로젝트의 개요 및 목적
  • 차별화 전략 및 제작 일정
  • 팀 구성 및 예산

2. 기획 단계에 설정될 내용

  • 전체 사이트 구조
  • 색상의 전반적인 분위기
  • 메뉴 구성

3. 경쟁사의 웹 사이트 분석

  • 해당 분야의 인터넷 시장 파악
  • 경쟁 사이트들을 분석하여 자신의 사이트 경쟁력 제고
  • 인터넷 시장의 흐름 이해

4. 웹 페이지 제작 시 고려사항

  • 조직성(Organization)
  • 결제성(Economy)
  • 일관성(Consistency)

5. 웹 사이트 분석 요소

  • 메뉴 구성
  • 디자인 구성
  • 사이트 제작 기술 수준

6. 콘셉트 도출

사이트의 목적과 사용자 분석에 따라 사이트의 디자인 방향을 설정하는 단계

 

7. 정보 체계화(Contents Branch) 과정

콘텐츠 수집 → 콘텐츠 그룹화 → 콘텐츠 구조화 → 계층구조의 설계 → 콘텐츠 구조설계 테스트

 

8. 좋은 정보구조 설계(정보 체계화)를 위해 고려해야 할 사항

  • 정보의 양
  • 정보의 상하관계
  • 정보의 일관성

9. 스토리보드(Story Board)

  • 웹 사이트의 전체구조, 화면 구성, 콘텐츠 정보 등을 작성해 보는 것
  • 화면 단위로 삽입될 구성요소 및 구체적 내용을 정리해 놓는 것
  • 웹 사이트의 가상 경로를 예상하여 기획하는 것으로 웹 사이트의 설계도이며 구체적인 작업 지침서 역할을 하는 것
  • 웹 페이지에 들어갈 그림, 사진, 글자, 음악 등을 종이 위에 표현하여 줄거리가 전개되듯이 표현하는 기법

10. 시나리오(Scenario)

현실이나 상상 속에서 제안되거나 계획된 일련의 사건들의 개략적인 줄거리를 말하며 스토리보드를 작성하는 토대가 됨

 

 

웹디자인기능사 필기 무료 강의

유선배 웹디자인기능사 필기 과외노트 도서를 바탕으로 제작된 무료 강의입니다 :) 이 영상 보시고 꼭 웹디자인기능사 필기에 합격하시길 기원합니다. ❤︎

www.youtube.com

 

 

728x90
SMALL

 

728x90
LIST