본문 바로가기

전체 글41

웹 사이트 디자인에 필요한 그리드 시스템, 박스 모델, 폰트 단위, 툴 별 행간 차이, Proportional 폰트, Monospace 폰트 웹 사이트 디자인에 필요한 그리드 시스템, 박스 모델, 폰트 단위, 툴 별 행간 차이, Proportional 폰트, Monospace 폰트 1. 그리드 시스템 그리드 시스템(Grid System) 정적인 인쇄 영역과 달리 다양한 스크린 크기에 대응하기 위한 규칙을 만들기 위해 사용 Column(컬럼) 실제로 콘텐츠를 포함하는 부분 컬럼의 너비는 콘텐츠가 스크린 크기에 맞춰질 수 있도록 고정값이 아닌 백분율로 결정 Gutter(거터) 컬럼과 컬럼 사이의 공간 거터의 너비는 브레이크포인트(반응형에 의해 레이아웃이 바뀌는 포인트)에 따라 결정 Margin(마진) 콘텐츠의 왼쪽 및 오른쪽 가장자리 사이의 공간(양쪽 여백) 반응형 웹에서는 일반적으로 12 컬럼 그리드 시스템을 사용 1, 2, 3, 4, 6 컬럼.. 2024. 4. 5.
일반 디스플레이와 레티나 디스플레이의 차이점, 컬러 프로파일 일반 디스플레이와 레티나 디스플레이의 차이점, 컬러 프로파일 1. 일반 디스플레이와 레티나 디스플레이의 차이점 픽셀 밀도(Pixel Density) 물리적으로 1인치(2.54cm * 2.54cm) 안에 들어가는 픽셀(화소)의 수 = PPI 같은 브랜드의 같은 기종이어도 조금씩 다른 해상도(Resolution)와 PPI(Pixel Per Inch)를 가지고 있음 2010년에 애플이 레티나(Retina) 디스플레이를 공개(망막으로는 픽셀을 구분할 수 없다는 의미로 애플에서 만든 용어) 현재 16인치 맥북 프로의 경우 2880*1800 해상도에 221 ppi를 지원 일반 디스플레이 최초의 맥에서 디스플레이는 1인치 당 72개의 픽셀이 들어감 그 후로 몇십 년 간 72 ppi의 픽셀 밀도에서 그래픽을 표현 현재.. 2024. 4. 5.
벡터와 비트맵 차이점, JPG, GIF, PNG, SVG 특징 벡터와 비트맵 차이점, JPG, GIF, PNG, SVG 특징 1. 이미지 포맷: Vector, Bitmap 이미지의 포맷(형식)에 따라 두 가지로 분류됨 Vector(벡터) Bitmap(비트맵) 장점 이미지 크기를 확대해도 선명함 사실적인 표현이 가능함, 컬러 표현 풍 단점 사실적인 표현이 어려움 이미지 크기를 확대하면 흐릿해짐 저장 방식 수학 기반의 좌표 픽셀 압축률 매우 좋음, 용량 적음 상대적으로 낮음, 용량 큼 저장 파일 AI, EPS, SVG JPG, GIF, PNG / (영상) AVI, MOV 프로그램 일러스트레이터, 인디자인 포토샵, 애프터이펙트 용도 로고, 패키지, 브로셔 등 사진, 그래픽 소스, 영상 등 기타 - 래스터(Raster) 방식이라고 칭하기도 함 2. JPG, GIF, PNG.. 2024. 4. 4.
인쇄 디자인과 디지털 미디어 디자인의 차이점(CMYK, RGB, DPI, PPI) 인쇄 디자인과 디지털 미디어 디자인의 차이점(CMYK, RGB, DPI, PPI) 1. 컬러 구현 체계의 차이: CMYK, RGB CMYK 인쇄 디자인에서 사용 색의 3원 색인 Magenta(자홍색), Yellow(노란색), Cyan(청록색) + Black(검은색)으로 구성 색을 혼합하면 혼합할수록 명도(밝고, 어두운 정도)가 낮아지는 감산혼합 즉, 혼합할수록 검은색에 가까워짐 전문 인쇄소에서는 CMYK로 표현하기 어려운 컬러(골드, 실버 등)는 별색을 사용함 즉, 전문 인쇄소는 5가지를 사용 CMYK는 필름으로 각각 찍어낸 후에 하나로 모아 최종 이미지 생성 RGB 디지털 미디어 디자인에서 사용 빛의 3원 색인 Red(빨간색), Green(초록색), Blue(파란색)으로 구성 색을 혼합하면 혼합할수록 .. 2024. 4. 3.
시각화(Visualization) 정의와 활용 시각화(Visualization) 정의와 활용 1. 시각화(Visualization) 정의 효율적인 커뮤니케이션, 메시지 전달을 위해 추상적, 구체적인 아이디어를 시각적으로 형상화하는 과정 커뮤니케이션을 위해 이미지, 다이어그램, 애니메이션 등을 만드는 행위 시각 디자인에 있어 시각화라는 용어는 정보를 시각적으로 보여주는 것뿐만 아니라, 메시지를 전달하기 위해 디자인 컨셉, 내용을 시각적 형태로 보여주는 행위로 폭넓게 사용 컨셉, 내용에 맞는 비주얼을 만들어 시각적으로 보여주는 행위 포스터 제작, 기업의 스토리, 신념 등을 전달하는 로고, 브랜드 아이덴티티(정체성) 등 2. 시각화 프로젝트 사례: 전시 그래픽 시각화 창원 조각 비엔날레 전시 창원 시내 여러 곳에서 전시 관람 가능한 행사(실내외 전시) 전.. 2024. 4. 3.
컬러를 감정적, 주관적, 과학적, 관계적으로 바라보는 방법 컬러를 감정적, 주관적, 과학적, 관계적으로 바라보는 방법 1. 컬러의 분류: 감정적, 주관적, 과학적, 관계적 컬러를 바라보는 방법에 따라 컬러를 감정적, 주관적, 과학적, 관계적으로 볼 수 있음 → 컬러 체계적으로 사용 가능 감정적 사람들이 색상을 보고 일반적으로 느끼는 감정 노란색 - 긍정, 낙관적 주황색 - 친근함 빨간색 - 열정, 재미, 에너지 보라색 - 창의적, 창조적 파란색 - 신뢰, 믿음, 혁신 녹색 - 평화, 안정적 주관적 개인적, 주관적인 관점으로 색상을 바라보고 느낌 색상을 보는 해석이 개인화되어 있음 개인의 경험과 이야기를 떠올리는 것 ex) 빨간색을 보고 어린 시절 선물로 받았던 빨간색 원피스가 떠오름 과학적 과학적 근거를 바탕으로 색상을 사용하는 것 ex) 교통 표지판은 왜 빨간.. 2024. 4. 3.