매체성 구성요소

매체별 디자인 제작 및 표준화

매체별 디자인

픽셀(pixel)

픽셀(pixel)은 picture element의 약자로, 디지털 이미지를 이루는 가장 작은 단위의 사각형점을 의미한다. picture(그림)와 element(원소)를 합성한 단어이기 때문에, 우리나라에서는 ‘화소’라 부르기도 한다

해상도

해상도란 그래픽 화면을 표시하는 장치의 정밀도, 즉 화면을 구성하는 픽셀(pixel) 수를 의미한다. 예를 들어 1,024*768 크기의 이미지는 가로 1,024개, 세로 768개의 픽셀로 구성되는 것이다. 해상도를 나타내는 단위로 PPI를 사용한다. PPI는 pixel per inch의 약자로, 모니터 등 디스플레이 장치의 가로 세로 1인치 면적 안에 몇 개의 픽셀이 들어갔는지에 대한 픽셀 조밀도를 나타낸다. PPI의 숫자가 높을수록 픽셀의 밀도가 높아 더욱 정밀한 표현이 가능한 반면, 파일 용량이 커진다. DPI는 dots per inch의 약자로, 대개 인쇄 등 출력물에 대한 해상도를 나타낼 때 사용된다. 가로세로 1인치 안에 몇 개의 점이 찍혔는지를 나타내며, PPI와 마찬가지로 숫자가 높을수록 정밀한 표현이 가능하다. 웹 작업 시 PPI와 DPI를 같은 개념으로 혼용하여 사용하기도 한다. 현대 사회의 IT 기반의 멀티미디어 환경은 디바이스의 특성에 따라 다양한 해상도와 파일 포맷을 요구하고 있으며, 요구 사양 또한 고사양화되고 있다.

• 웹 브라우저(web browser)
  • 웹의 경우 컴퓨터 사양에 따라 요구되는 해상도도 다르다. 웹 브라우저의 경우 모니터 해상도에 따라 1,024×768, 1,280×1,024, 1,920×1,080으로 다양하지만, 모니터가 고해상도화됨에 따라 점차 1,920×1,080의 해상도가 확대되고 있다.
• 스마트폰
  • 스마트폰 인터페이스 해상도는 디바이스의 종류에 따라 다양하다. 특히, 안드로이드 운영 체제를 지원하는 스마트폰의 경우, 제조사와 단말기 특징에 따라 화면 크기가 조금씩 다르다. dks드로이드 운영 체제를 지원하는 스마트폰은 제조업체와 스크린 크기에 따라 해상도가 다양하며, 저해상도부터 고해상도까지 LDPI(120dpi), MDPI(160dpi), HDPI(240dpi), XHDPI(320dpi), XHDPI(480dpi), XXXHDPI(640dpi)의 여섯 가지 해상도로 나눌 수 있다.
  • 안드로이드용 애플리케이션을 제작할 때는 해상도를 구분하여 제작해야 하지만, 모든 해상도에 맞춰 제작하기가 어렵기 때문에 관련 애플리케이션을 서비스할 대표 모델과 대표 해상도를 정해서 제작해야 한다. 고사양의 스마트폰이 지속적으로 개발됨에 따라 점차 XHDPI(320dpi), XXHDPI(480dpi) 이상의 해상도 제작 비율이 높아지고 있는 추세이다. IOS 운영 체제의 아이폰 해상도는 다음과 같다.

 

스마트폰별 그리드 DEVICE METRICS

Device Metrics - Material Design

웹 그래픽 형식과 포맷

• 비트맵(bitmap)
  • 비트맵은 픽셀이 모여 구성된 이미지로, 주로 사진과 같은 자연스러운 이미지 표현에 사용된다. 이미지의 크기 조절이나 이동 등에 밀접한 영향을 받으며, 이미지를 무리하게 확대할 경우 픽셀이 깨져서 보인다. 다른 파일 포맷에 비해 화질이 좋은 대신 용량이 큰 단점이 있다.
• JPG(JPEG)
  • 웹에서 가장 많이 사용하는 방식의 파일 포맷으로, 색상을 24비트로 표현한다. 다른 파일 포맷에 비해 용량이 가볍지만, 압축을 많이 하면 화질이 떨어진다.
• GIF
  • GIF는 가장 기본적은 웹 그래픽 포맷이다. 비트맵이나 JPG 포맷과 달리 이미지의 특정 부분에 투명도를 적용할 수 있으며, 이미지에 움직임을 적용하여 간단한 이모티몬이나 애니메이션을 만들 수 있다. 색상을 8비트로 표현하기 때문에 다양한 색상을 표현하는 데 한계가 있다.
• PNG
  • JPG와 GIF의 단점을 보완한 파일 포맷으로, JPG 수준의 색상 표현에 GIF의 투명도까지 적용할 수 있으나 JPG·GIF에 비해 파일 용량이 큰 단점이 있다.

웹 표준

웹 표준은 웹(World Wide Web)을 구현하기 위해 따라야 할 표준 또는 규격을 의미한다. 다양한 웹 기술을 통해 수많은 콘텐츠가 공유되고 확산되면서, 웹 접근성, 사생활 보호, 보안, 국제화 등을 고려한 웹 기술의 표준화가 필요하게 되었다. 국제표준화기구로 월드 와이드 웹 컨소시엄(W3C)이 있으며, 대표적 웹 표준으로 하이퍼텍스트 생성 언어(HTML), 확장성 하이퍼텍스트 생성 언어(XHTML), 종속형 시트(CSS: cascading style sheets), 자바스크립트(JavaScript), 웹 사용에 대한 웹 콘텐츠 접근성 지침 등이 있다.

웹 표준 스펙

HTML(hypertext markup language)

웹 문서를 만들기 위하여 사용하는 기본 프로그래밍 언어로, 인터넷에서 접하는 대부분의 웹 문서들은 HTML로 작성된다.

CSS(cascading style sheets)

웹 문서를 표현하기 위한 전반적 스타일을 미리 저장해 둔 스타일시트로, 웹 문서의 폰트 종류와 크기, 여백, 색, 배경색, 정렬 등에 대한 정보를 미리 지정할 수 있다. CSS를 사용한 페이지는 어떤 브라우저에서도 볼 수 있을 정도로 호환성이 좋다.

XML(extensible markup language)

1998년에 W3C 표준 권고안에 포함된 XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)로, 인간과 기계가 동시에 읽기 편한 구조로 되어 있다. 그러나 XML은 HTML처럼 데이터를 보여 주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로 만들어졌으며, HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있다.

웹 표준 검사 방법

W3C에서는 웹 페이지가 표준안에 맞는지, 접근성이 고려되었는지 유효성 검사(validation)에 대한 정보를 제공하고 있다. 개발 과정에서 이러한 검사를 진행하면 개발 과정에서의 오류를 최소화할 수 있다.

HTML, XHTML 등의 웹 문서 유효성 검사

http://validator.kldp.org

CSS 유효성 검사

http://css-validator.kldp.org