13. 일러스트레이터 그리드 시스템

▪ 만들 것

800×800px 격자로 잡은 와이어프레임 1장 (헤더·본문·사이드바·푸터)

▪ 미리 알아두기

그리드(격자)란

가로선과 세로선이 일정한 간격으로 교차해 만들어진 보조선 구조. 도형을 화면에 합리적으로 배치하기 위한 뼈대다.

• 사전적 정의: 일정한 간격으로 배치된 수평선과 수직선의 그물망 (지도에서 위치를 찾는 격자처럼).
• 그래픽 디자인 맥락: 직선이나 곡선의 안내선이 교차해 만든 구조. 디자이너가 이미지·글자·문단 같은 그래픽 요소를 합리적이고 흡수하기 쉽게 배치할 수 있는 「뼈대」 역할. 페이지 안 요소들끼리, 또는 한 그래픽 요소 안 부분들끼리 정렬할 때 활용.

일러스트레이터의 격자는 수평·수직 직선만으로 구성된다.

곡선 격자가 필요하면 안내선을 직접 그려 만든다.

격자가 중요한 이유

1. 시각적 균형: 요소들이 서로를 보완하도록 배치되어 안정감 있는 화면.
2. 객체 배치 가이드: 객체끼리, 또는 객체와 대지 사이의 관계를 잡아준다.
3. 픽셀 퍼펙트 작업: 디지털 디바이스용으로 또렷한 작업물.

디지털 vs 인쇄

디지털 매체와 인쇄 매체는 이미지를 표현하는 방식이 근본적으로 다르다.

모니터는 픽셀 격자에 의존한다. 정사각형 픽셀이 격자 모양으로 깔린 구조라 곡선이나 대각선을 표현할 때 가장자리에 반투명 픽셀(알파 채널)을 추가한다 → 이 과정이 안티에일리어싱이다. 종이 위에 자연스럽게 그은 직선의 느낌을 모방한다.

프린터는 종이 크기와 dpi(dots per inch)에만 의존한다. 고해상도dpi 설정이면 곡선이 완벽하게 출력된다. 종이에 색점을 하나씩 쌓아 인쇄하기 때문에 화면 디바이스가 부드러운 곡선을 만들기 위해 사용하는 반투명 값이 필요 없다.

스냅(Snap)이란

스냅은 일러스트레이터에게 「대지 위 모든 객체를 격자 또는 픽셀 격자에 정렬하라」고 지시하는 기능이다.

픽셀 퍼펙트 일러스트의 핵심이 스냅이다. 매우 또렷한 디자인은 모든 요소가 픽셀 격자에 정렬되고 모든 값이 정수로 만들어진 결과다.

정수 값 = 소수점 없는 값.

• ✓ 200×100 px
• ✗ 200.84×99.80 px

픽셀 미리보기 vs 기본 모드

• 기본 모드(Default): 새 문서의 기본 미리보기 모드. 디자인이 보이는 그대로(벡터)다. 스냅은 격자 단위, 격자 칸으로 끌려간다.
• 픽셀 미리보기(Pixel Preview): 보기 > 픽셀 미리보기. 벡터의 실제 픽셀 모양이 드러난다. 스냅은 픽셀 단위, 객체가 키보드 증가폭만큼 이동한다.

1. 새 문서 만들기 (테스트용)

1. 파일 > 새로 만들기 (Ctrl + N)
2. 다음 값으로 설정한다.
   • 대지 수: 1
   • 폭: 800px
   • 높이: 800px
   • 단위: 픽셀
3. 고급 옵션을 펼친다.
   • 색상 모드: RGB
   • 래스터 효과: 고품질 (300ppi)
   • 새 오브젝트를 픽셀 격자에 정렬: 체크
4. 만들기 클릭.

화면용 작업이지만 래스터 효과를 300ppi로 둔다. 화면엔 영향이 없지만, 추후 인쇄가 필요해질 때 그림자·내부 그림자 같은 효과가 낮은 ppi에서 깨지지 않는다. 도중에 변경하려면 효과 > 문서 래스터 효과 설정.

2. 검정 사각형 만들기

1. 사각형 도구 (M)로 100×100px 검정 사각형을 그린다.
2. 정렬 패널에서 「대지 기준 정렬」 선택.
3. 좌측 상단으로 정렬.

3. 격자 표시하기

1. 보기 > 격자 표시 (Ctrl + ").
2. 일러스트레이터 환경 설정의 기본 격자선 간격(예: 1000px), 4분할 격자가 화면에 나타난다.

4. 격자에 물리기 동작 확인

격자가 켜졌다고 자동으로 사각형이 격자에 정렬되는 건 아니다. 「격자에 물리기」를 켜야 한다.

4.1 격자에 물리기 꺼진 상태

1. 사각형 선택.
2. 방향키로 한 칸씩 이동시켜 본다.
3. 사각형이 한두 픽셀씩만 거의 안 보일 정도로 움직인다.

4.2 격자에 물리기 켜기

1. 사각형을 처음 위치로 되돌린다.
2. 보기 > 격자에 물리기 (Shift + Ctrl + ").
3. 다시 방향키로 이동.
4. 사각형이 격자선에 한 칸씩 끌려가듯 움직인다 → 패턴이 명확히 보인다.

📷 격자 표시된 화면 + 검정 사각형

5. 기본 격자 구조 이해

일러스트레이터 기본 격자 설정:

• 격자선 간격: 1000 px
• 분할: 4

1000px마다 일러스트레이터가 큰 사각형 영역을 그린다. 그 안이 1000÷4=250px 간격으로 16개 작은 사각형으로 나뉜다.

📷 1000px×4 격자 구조 도식 (16개 250×250 사각형)

5.1 800×800 대지가 격자 안에 어떻게 위치하는지

• 대지 내부는 250×3=750px 까지 격자칸 3개가 들어가고 나머지 50px 가 남는다.
• 1000px 격자 영역에서 대지 바깥 200px 는 미사용이다.
• 1000×1000 격자의 좌측 상단에 정렬됨

📷 800×800 대지 위치 도식 (200px 미사용 영역)

5.2 100×100 검정 사각형이 격자에 끌려가는 이유

사각형이 100×100 px이라 250×250 격자칸의 가장자리(격자선)에 닿는 위치로 끌려간다. 만약 사각형이 정확히 250×250 px이었다면 격자 한 칸을 그대로 차지하며 16개 안 칸 중 하나를 정확히 점유한다.

6. 격자 설정 바꾸기

프로젝트마다 다른 격자 설정이 필요하다. 대지 크기와 정렬 정밀도에 따라 격자도 다르게 둔다. 가장 작은 설정이 가장 정확한 결과를 준다.

6.1 권장 설정

• 격자선 간격: 1 px
• 분할: 1

1px / 1분할로 두면 픽셀 단위로 정확하게 움직인다. 정밀한 위치 조정에 유리하다.

6.2 변경 방법

1. 편집 > 환경 설정 > 안내선과 격자.
2. 격자선 간격, 분할 입력.
3. 확인.

📷 안내선과 격자 환경 설정 다이얼로그

격자와 패스파인더 패널(Pathfinder) 조합 = 객체를 빠르고 직관적으로 배치할 수 있다.

7. 격자로 와이어프레임 만들기

이번엔 800×800 대지에서 격자선 간격 800px / 분할 4로 설정해 화면 구획을 빠르게 만든다.

오늘날 표준 웹사이트 너비는 960px지만, 본 실습은 격자 사용 자체를 익히는 목적이라 800px로 둔다.

7.1 격자 설정 변경

1. 편집 > 환경 설정 > 안내선과 격자.
2. 격자선 간격 800px, 분할 4로 설정.

7.2 헤더 영역

1. 사각형 도구 (M)로 800×200 px 사각형을 그린다.
2. 면 색: #191919 (거의 검정).
3. 대지의 위쪽에 붙인다.
4. 문자 도구 (T)로 "Header"라고 표시.

라벨 글자처럼 격자에 안 물려도 되는 작은 요소는 선택 후 보기 > 격자에 물리기 체크를 풀고 옮긴다.

7.3 본문 영역

1. 600×400 px 사각형을 그린다.
2. 면 색: #3D3D3D (헤더보다 옅은 회색).
3. 헤더 바로 아래 왼쪽에 붙인다.
4. 문자 도구로 "Content" 표시.

7.4 사이드바 영역

1. 200×400 px 사각형을 그린다.
2. 면 색: #B24747 (빨강).
3. 본문 영역 오른쪽에 붙인다.
4. 문자 도구로 "Sidebar" 표시.

7.5 푸터 영역

1. 800×200 px 사각형을 그린다.
2. 면 색: #191919.
3. 대지 아래쪽에 붙인다.
4. 문자 도구로 "Footer" 표시.

📷 헤더·본문·사이드바·푸터로 완성된 와이어프레임

몇 초 만에 기본 와이어프레임이 완성된다. 더 시간을 들이면 훨씬 풍부한 디자인을 만들 수 있다.

8. 픽셀 미리보기로 마무리 점검

격자 스냅(Snap to Grid)과 픽셀 스냅(Snap to Pixel)에는 차이가 있다. 작업물이 가장 또렷하게 보이려면 픽셀 미리보기로 마무리 점검을 해야 한다.

8.1 격자 스냅 vs 픽셀 스냅

• 격자 스냅(기본 모드): 새 문서 기본 미리보기 모드는 「기본(Default)」. 디자인이 보이는 그대로(벡터). 스냅은 격자 단위, 격자 칸으로 끌려간다.
• 픽셀 스냅(픽셀 미리보기): 보기 > 픽셀 미리보기. 벡터의 실제 픽셀 모양이 드러난다. 스냅은 픽셀 단위, 객체가 키보드 증가폭만큼 이동한다.

8.2 픽셀 미리보기 켜기

1. 보기 > 픽셀 미리보기.
2. 화면을 크게 확대하면 도형의 실제 픽셀 모양이 드러난다.

8.3 키보드 이동 폭 설정

• 편집 > 환경 설정 > 일반 > 키보드 증가폭.
• 기본값을 원하는 픽셀 값으로 변경 (객체 이동 정밀도).

📷 일반 환경 설정 - 키보드 증가폭

8.4 픽셀 스냅의 효과

200.9×60.40 px처럼 소수점 단위로 그려진 도형도 픽셀에 물리기를 켜면 정수 픽셀로 강제 정렬된다 → 더 또렷한 객체.

8.5 권장 흐름

1. 격자에 물리기로 객체 배치 작업.
2. 작업이 끝나면 픽셀 미리보기 모드로 전환.
3. 도형이 픽셀 격자에 맞게 정렬됐는지 확인.
4. 어긋난 부분은 픽셀 단위로 정리해 결과물을 또렷하게 만든다.

▪ 저장

• 파일 > 저장 (Ctrl + S)
• 형식: Adobe Illustrator (.ai)
• 파일명: 이름_그리드시스템.ai

막히면 — AI 코치에게 묻기

이 문서에서 익힌 일러스트레이터 격자·스냅으로 픽셀 정렬된 와이어프레임 만들기를 내 작업에 적용하다 막히면, 아래를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 실습 코치로 삼는다. 답을 한꺼번에 받지 말고 한 단계씩 풀어 간다.

너는 어도비 일러스트레이터 격자·스냅 실습 코치다. 나는 격자 표시, 격자에 물리기, 격자선 간격·분할 설정, 픽셀 미리보기로 와이어프레임을 픽셀 단위로 정렬하는 법을 배웠고, 800x800px 대지에 헤더·본문·사이드바·푸터로 나뉜 와이어프레임 1장을 직접 완성하려 한다. 답을 통째로 주지 말고 한 단계씩 물어 내가 직접 하게 한다.

[코칭 방식]
1. 먼저 내가 지금까지 한 것과 막힌 지점을 묻는다.
2. 막힌 원인을 한 가지 짚어 준다. 완성된 결과물을 통째로 주지 않는다.
3. 다음 한 단계만 제시하고, 내가 해 본 결과를 말하면 확인 질문을 던진다.
4. 마지막에 모든 사각형이 격자선·픽셀 격자에 정수 값으로 정렬됐는지 점검 질문을 한다.

[내 상황]
- 지금까지 한 것: {한것}
- 막힌 지점·메시지: {막힌점}
- 내 소재: {소재}

준비됐으면 "지금 대지 크기와 격자 설정값은 무엇인가"라고만 답한다.

1. {한것} — 지금까지 진행한 단계, 예: 800x800 대지를 만들고 격자선 간격 800·분할 4로 설정한 뒤 헤더 사각형까지 그렸다.
2. {막힌점} — 막힌 부분이나 받은 메시지, 예: 격자에 물리기를 켰는데 사각형이 원하는 격자선에 안 붙고 살짝 어긋난다.
3. {소재} — 적용할 내 자료·주제, 예: 내가 만들려는 쇼핑몰 첫 화면 와이어프레임.

아래는 변수를 실제 값으로 채운 완성 예시다.

너는 어도비 일러스트레이터 격자·스냅 실습 코치다. 나는 격자 표시, 격자에 물리기, 격자선 간격·분할 설정, 픽셀 미리보기로 와이어프레임을 픽셀 단위로 정렬하는 법을 배웠고, 800x800px 대지에 헤더·본문·사이드바·푸터로 나뉜 와이어프레임 1장을 직접 완성하려 한다. 답을 통째로 주지 말고 한 단계씩 물어 내가 직접 하게 한다.

[코칭 방식]
1. 먼저 내가 지금까지 한 것과 막힌 지점을 묻는다.
2. 막힌 원인을 한 가지 짚어 준다. 완성된 결과물을 통째로 주지 않는다.
3. 다음 한 단계만 제시하고, 내가 해 본 결과를 말하면 확인 질문을 던진다.
4. 마지막에 모든 사각형이 격자선·픽셀 격자에 정수 값으로 정렬됐는지 점검 질문을 한다.

[내 상황]
- 지금까지 한 것: 800x800 대지를 만들고 격자선 간격 800·분할 4로 설정한 뒤 헤더 사각형까지 그렸다.
- 막힌 지점·메시지: 격자에 물리기를 켰는데 사각형이 원하는 격자선에 안 붙고 살짝 어긋난다.
- 내 소재: 내가 만들려는 쇼핑몰 첫 화면 와이어프레임.

준비됐으면 "지금 대지 크기와 격자 설정값은 무엇인가"라고만 답한다.