디자인 툴 (Design Tools)7 [Web Design] 반응형 웹의 핵심: 미디어 쿼리와 정교한 레이아웃 설계법 고정된 디자인에서 흐르는 디자인으로디자인 원칙(Design Principles) 수업에서 시각적 계층 구조의 중요성을 배웠다면, 웹 수업에서는 그 구조가 다양한 기기에서 어떻게 유지되어야 하는지를 배운다. 과거의 웹이 데스크톱이라는 고정된 캔버스에 맞춰졌다면, 현대의 웹은 스마트폰부터 대형 모니터까지 유연하게 대응해야 한다. 이를 가능하게 하는 것이 바로 반응형 웹 디자인(Responsive Web Design)이며, 그 중심에는 미디어 쿼리가 있다.1. 미디어 쿼리(@media): 화면 크기에 따른 스타일의 변주미디어 쿼리는 브라우저에게 현재 화면의 상태를 묻고, 그 조건에 맞는 CSS를 적용하는 논리적인 장치이다. 기본 구문과 중단점(Breakpoint)의 의미를 살펴보자. @media screen .. 2026. 3. 19. [Web Design] 디자인이 직접 구현되는 언어: CSS 기초 용어 완벽 정리 웹의 뼈대와 옷, HTML과 CSS의 관계웹 사이트를 만드는 과정은 건물을 짓는 것과 비슷하다. HTML이 건물의 구조를 잡는 뼈대라면, CSS(Cascading Style Sheets)는 그 건물에 색을 칠하고 조명을 다는 인테리어 작업이다. 인터랙티브 미디어 디자인을 전공하며 시각적인 결과물을 만들어낼 때, CSS는 디자이너의 의도를 웹 브라우저에 투영하는 가장 강력한 도구가 된다. 수업 시간에 배운 내용을 바탕으로 CSS의 가장 기본적인 구성 요소와 용어들을 다시 한번 자세히 짚어보려고 한다. 1. CSS 구문의 기본 구조 (Rule Set)CSS는 브라우저에게 스타일 규칙을 전달하는 일종의 매뉴얼 북 같은 개념이다. 하나의 규칙은 다음과 같은 요소들로 구성된다. 이러한 요소들이 모여 하나의 스타.. 2026. 3. 10. 타이포그래피의 본질을 찾아서: Glyphs 툴로 시작하는 서체 디자인 입문 1. 왜 서체를 직접 만드는가?디자인 원칙(Design Principles) 수업을 통해 시각 언어의 기초인 타이포그래피의 중요성을 심도 있게 배우고 있다. 평소 선호하는 Montserrat 체처럼 현대적이고 기하학적인 서체의 매력에 깊이 빠져 있다 보니, 단순히 기존 서체를 활용하는 단계를 넘어 나만의 감성을 담은 글자를 직접 빚어보고 싶다는 욕심이 생겼다. 반면 개인적으로 선호하지 않는 Helvetica 체와 같은 고전적인 양식들을 분석하며, 내가 추구하는 조형미와 가독성이 무엇인지 고민하게 된 것이 이번 도전의 시작이다. 그리고 가장 먼저 제작해야할 글씨체는 H, O (대문자), n, p (소문자) 이렇게 4가지 알파벳이다. 2. Glyphs: 전문가를 위한 서체 디자인 도구의 선택서체 제작을 위.. 2026. 3. 8. [Photoshop vs LightRoom] 사진 편집의 양대 산맥: 라이트룸 vs 포토샵, 나에게 맞는 툴은? 각 사진 편집 도구의 목적을 먼저 이해하기우리는 흔히 사진을 수정할 때 포토샵을 떠올리지만, 전문적인 사진 작업의 흐름에서는 라이트룸이 주인공이 되는 경우가 많다. 디자인 원칙(Design Principles)에서 일관성과 효율성을 강조하듯, 소프트웨어 역시 각각의 특화된 목적이 있습니다. 이번 포스팅에서는 라이트룸과 포토샵의 근본적인 차이점과 프로젝트별 활용 방안을 심도 있게 살펴보자. 1. 어도비 라이트룸: 효율적인 관리와 일관된 보정의 중심1) 카탈로그 방식의 비파괴 편집 (Non-destructive Editing)라이트룸은 수천 장의 사진을 관리하고 보정하는 사진작가의 디지털 암실과 같다. 라이트룸의 가장 큰 특징은 원본 파일을 직접 건드리지 않는다는 것이 핵심 특징이다. 라이트룸은 원본 파일 .. 2026. 3. 8. 이전 1 2 다음
