14. 웹사이트 레이아웃

▪ 만들 것

빈 대지 (960×1500px, RGB) 1개 + 디자인 참고용 브라우저 윈도우 레이어

▪ 미리 알아두기

표준 너비 960px

웹사이트는 다양한 화면 크기에서 보인다. 너무 좁으면 큰 화면에서 비어 보이고, 너무 넓으면 작은 화면에서 잘린다. 평균~대형 모니터를 쓰는 대다수 방문자에게 무리 없이 보이는 안전한 너비가 960px다.

100% 확대 비율

화면에 보이는 크기가 곧 웹에서 보일 크기다. 작업 중에는 자유롭게 확대·축소해도 되지만 100% 비율에서 글자와 디자인 요소가 읽히는지 수시로 확인한다. 100%에서 안 읽히는 글자는 웹사이트에서도 읽히지 않는다.

브라우저 윈도우 참고 레이어

빈 브라우저 창 스크린샷을 별도 레이어에 깔아두면 「실제 브라우저에서 어떻게 보일까」를 디자인 도중 가늠할 수 있다.

대지 숨기기와 안내선

대지 숨기기와 안내선 토글은 서로 다른 기능이다. 대지 숨기기는 메뉴(보기 > 대지 숨기기)로 하고, 안내선 토글은 단축키 Ctrl + ;로 한다. 대지 숨기기 메뉴는 매번 상단 메뉴를 거쳐야 해서 느리므로, 작업 중에는 안내선을 토글해 영역을 구분하는 편이 효율적이다.

📎 img.zip

1. 새 파일

1. 파일 > 새로 만들기 (Ctrl + N)
2. 다음과 같이 설정한다.
   • 폭: 960px
   • 높이: 1500px (또는 작업 분량에 맞게)
   • 단위: 픽셀
   • 색상 모드: RGB
3. 만들기 클릭.

📷 새 문서 다이얼로그

검은 테두리로 표시된 영역이 대지(Artboard)다.

2. 브라우저 윈도우 참고 레이어

디자인을 시작하기 전에 빈 브라우저 윈도우 스크린샷을 별도 레이어에 깔아둔다. 디자인 도중 「실제로 브라우저에서 어떻게 보일까」를 가늠할 수 있다.

1. 강사가 공유한 빈 브라우저 윈도우 이미지를 파일 > 가져오기로 불러온다.
2. Layers 패널에서 새 레이어 생성, 이름 browser-ref.
3. 이미지를 그 레이어에 두고 대지에 맞게 배치.
4. 레이어 잠금 (디자인 작업 중 움직이지 않게).

📷 빈 브라우저 윈도우 레이어

3. 100% 확대 비율 확인

이 단계가 결과물 가독성을 좌우한다.

최종 웹사이트는 100%에서 보이므로 디자인 단계에서 100% 가독성 확인이 필수다.

1. 작업 화면 좌측 하단의 확대 비율 표시 확인.
2. 100%가 아니면 직접 입력하고 Enter.

비율 입력 후 숫자가 즉시 안 바뀌면 Enter 키를 누른다. 일러스트레이터가 입력 중간에 숫자를 안 바꾸는 경우가 있다.

4. 대지 숨기기 (선택)

대지 검은 테두리가 거슬릴 때 숨긴다.

• 보기 > 대지 숨기기
• 다시 보이기: 보기 > 대지 표시

안내선이 켜져 있으면 대지를 숨겨도 영역 구분이 가능하다.

• 안내선 토글: Ctrl + ;
• 안내선 잠금 해제: Ctrl + Alt + ;

단축키가 메뉴 클릭보다 훨씬 빠르다. 웹사이트 한 화면을 디자인하는 동안 화면 토글을 수십 번 하게 되므로 단축키 습관을 들인다.

5. 회색 박스로 영역 잡기

어디에 무엇이 들어갈지 회색 박스로 먼저 결정한다. 균형과 위계가 한눈에 잡힌다.

5.1 글자 영역

1. 사각형 도구 (M) 선택.
2. 면 색: 회색.
3. 선 색: 칠 없음.
4. 가로로 긴 가는 직사각형을 그린다.

5.2 이미지 영역

1. 같은 사각형 도구로 면적이 큰 직사각형을 그린다.
2. 글자 영역보다 면적을 크게.

5.3 영역 배치

• 헤더 (로고·내비게이션)
• 메인 비주얼
• 카테고리 4칸 (이미지 + 제목)
• 본문 콘텐츠 (이미지 + 글자 짝)
• 푸터

📷 회색 박스로 잡은 화면 영역

6. 안내선으로 변환

회색 박스의 위치를 안내선으로 옮긴다. 회색 박스는 임시 표시였고, 안내선이 영구적인 영역 기준이 된다.

6.1 자 표시

• 보기 > 자 > 자 표시 (Ctrl + R).
• 화면 상단·왼쪽에 자가 나타난다.

6.2 안내선 만들기

1. 위쪽 또는 왼쪽 자에서 화면 안쪽으로 드래그.
2. 회색 박스의 가장자리마다 안내선을 놓는다.

6.3 회색 박스 삭제

1. 모든 회색 박스 선택.
2. Delete.

6.4 안내선 다루기

• 보이기/숨기기: Ctrl + ;
• 잠금 해제: Ctrl + Alt + ;
• 모두 지우기: 보기 > 안내선 > 안내선 지우기

안내선은 토글하면 자동으로 잠긴다. 잠긴 안내선은 옮길 수 없으므로 잠금 해제 단축키를 기억해둔다.

📷 안내선으로 변환된 화면

7. 안내선 위에 자리 표시 추가

안내선을 기준 삼아 어디에 무엇이 들어갈지 더 명확히 잡는다. 마음에 안 들면 안내선 위치를 다시 조정한다.

7.1 내비게이션 자리

• 헤더 영역 오른쪽에 메뉴 항목이 들어갈 자리를 정한다.

7.2 로고 자리

• 헤더 왼쪽에 로고가 들어갈 자리를 정한다.

7.3 이미지·아이콘 자리

• 메인 비주얼·카테고리 영역에 이미지·아이콘이 들어갈 자리를 표시한다.

안내선 켜고 끄면서(Ctrl + ;) 영역 비율을 다듬는다. 이 단계에서 안내선이 마음에 안 들면 잠금을 풀고 옮긴다.

처음 그린 안내선이 절대적인 게 아니므로 디자인 흐름에 맞게 자유롭게 조정한다.

▪ 저장

• 파일 > 저장 (Ctrl + S)
• 파일명: 이름_안내선.ai

8. 헤더 영역 채우기

8.1 로고

1. 강사가 공유한 로고 이미지를 파일 > 가져오기로 불러온다.
2. 안내선의 헤더 영역 왼쪽에 배치.
3. 크기 조정.

8.2 내비게이션

1. 문자 도구 (T)로 메뉴 항목을 입력한다 (예: HOME, PORTFOLIO, RESUME, SERVICES, BLOG, CONTACT).
2. 가로로 일정 간격 배치.
3. 안내선의 헤더 영역 오른쪽에 정렬.

8.3 메인 비주얼 이미지

1. 강사가 공유한 메인 이미지를 파일 > 가져오기로 불러온다.
2. 메인 비주얼 안내선에 맞게 배치.

8.4 카테고리 아이콘

1. 강사가 공유한 아이콘 이미지를 가져온다.
2. 카테고리 4칸에 하나씩 배치.
3. 아이콘 아래에 문자 도구로 카테고리 명 추가 (예: Editorial Work, Interactive, Large Publications).

9. 헤더에 색 입히기

1. 사각형 도구 (M)로 헤더 안내선 크기와 같은 사각형을 그린다.
2. 면 색: 옅은 파랑 (예: R 200 G 230 B 240).
3. 선 색: 칠 없음.
4. 오브젝트 > 정돈 > 맨 뒤로 보내기 (Ctrl + Shift + [) → 로고·내비 뒤로 보낸다.

📷 헤더에 옅은 파랑 색이 입혀진 모습

10. 텍스트 스타일

링크와 제목의 모양을 미리 결정해 두면 코딩 단계에서 결정할 일이 줄어든다.

10.1 본문 글자

1. 문자 도구 (T)로 본문 영역에 짧은 더미 텍스트 입력.
2. 글꼴: 강사가 안내한 글꼴.
3. 크기: 16 px (본문 기준).
4. 색: 진한 회색 (R 60 G 60 B 60).

10.2 소제목

1. 본문 위에 소제목 입력 (예: 「Website and Logo」, 「StoryBoards」).
2. 크기: 본문보다 크게.
3. 굵기: 굵게 (Bold).
4. 색: 본문과 다른 색 (예: 빨강 또는 파랑).

10.3 링크

1. 본문 안에 링크 텍스트 입력 (예: 「more…」).
2. 색: 본문보다 진하게 또는 밑줄.

📷 텍스트 스타일이 적용된 본문 영역

▪ 저장

• 파일 > 저장 (Ctrl + S)
• 파일명: 이름_디자인마무리.ai