[기획]/화면설계 심화

당근대장 PPT 스토리보드 그리기 실습 (1)

완벽한 장면 2026. 1. 15. 21:17

0) 시작 전 준비(기본 세팅)

  1. 새 프레젠테이션 열기
  2. 슬라이드 크기 먼저 변경
    • 디자인 > 슬라이드 크기에서 A4 용지 크기로 변경
  3. 불필요한 기본 슬라이드 삭제
  4. 슬라이드 마스터 템플릿 불러오기
    • 저장해둔 “스토리보드 마스터(슬라이드 마스터 템플릿)” 적용
  5. 표지(커버) 삽입
  6. 다음 페이지부터 작업 흐름 준비
    • 새 슬라이드 추가 → 분류(예: 프론트) 페이지 구성
  7. 표준 템플릿(소트/표준 템플릿) 불러오기
  8. 작업 습관
    • Ctrl + S를 계속 반복 저장(습관화)

 

1) 본격 실습: “옵션 사이트 화면 SB” 그리기(큰 틀 → 세부)

1-1. 레퍼런스 가져오기(로고/검색바 등)

1. 옵션 사이트(레퍼런스)에서 로고/배너/검색 UI 등 복사해서 붙여넣기

  • 듀얼 화면이 아니어도, 필요한 요소는 사이트에서 복사→붙여넣기로 가져온다.

2) 상단 영역(Top Area) 만들기

2-1. 검색 영역 라인부터 잡기

1. 라인(선) 굵기 설정

  • 선을 그린 뒤 **굵기 약 2.25 정도(“2에 4분의 1”)**로 설정(강사 기준)

2. 검색바/검색 버튼은 가능하면

  • 다른 사이트(예: 옥션)의 검색 버튼 요소를 그대로 복사해서
  • 옵션 사이트 레이아웃에 **잘라 붙이는 방식(Ctrl+C/V)**으로 처리

2-2. 상단 로그인/메뉴 텍스트 영역

  1. 상단 메뉴(로그인/회원가입/장바구니/마이옵션/고객센터/판매하기 등)는 텍스트로 처리
  2. 텍스트 스타일 기준
    • 기존 18pt로 잡혀 있으면 9pt 또는 8pt로 변경
    • 글꼴이 맑은 고딕인지 확인
  3. 상단(Top Area) 라인에 맞춰 텍스트 배치

2-3. 하단 배너(패턴 채우기) 만들기

  1. 하단 배너 영역은 사각형 도형으로 만든다
  2. 도형 스타일
    • 채우기: 블랙
    • 우클릭 → 도형 채우기 > 패턴 채우기 → 두 번째 문양 선택
    • 윤곽선(라인): 없음
  3. 배너 텍스트 입력(예: “옵션 단독 진행”, “폴딩 박스 증정” 등)
  4. “고수 방식” 팁
    • 오브젝트를 메뉴로 찾아가지 않고
    • Ctrl 누르고 드래그 복제로 빠르게 배치

3) GNB 영역(상단 7개 메뉴) 만들기

3-1. 7개 메뉴 구성(전체 카테고리~최근 본 상품)

  1. 상단 메뉴 개수 확인 → 7개 배치
  2. 텍스트 스타일 기준
    • 0.5
    • 테두리 없음 / 음영 없음
    • 텍스트 9pt, 굵게
  3. 메뉴 항목(스크립트 기준)
    • 전체 카테고리 / 쿠폰 / 포인트 / 베스트 / 스마일배송 / 유니버스클럽 / 사업자클럽 / 최근 본 상품
      (말 중에 7개라 했지만 항목은 더 언급됨 → 실제 화면 기준으로 맞추고, 필요한 만큼 조정)

3-2. 햄버거 메뉴 아이콘 추가

  1. “전체 카테고리” 왼쪽에 햄버거 박스가 있으면
    • 약간 띄워서 공간 확보
    • 햄버거 아이콘을 복사해서 붙여넣기

3-3. 눈금/안내선으로 정렬(필수)

  1. 눈금/안내선 설정
    • 세로 안내선 사용(불필요한 안내선 제거)
  2. 좌/우 기준으로 정렬 잡고
  3. 요소들을 안내선에 맞춰 “갖다 붙이듯이” 배치

3-4. 테두리 처리 규칙

  1. 내부 테이블은
    • 전체 테두리 없음
    • 안쪽 테두리만 적용
  2. 하단 테두리/상단 테두리 확인
    • 실제 화면에서 떨어져 보이거나 없다면 과감히 제거
  3. 귀찮으면
    • 자주 쓰는 선 스타일은 기본 선으로 설정해두고 반복 사용

 

4) 좌측 카테고리 테이블(좌측 LNB) 만들기

4-1. 테이블 개수 및 생성 방법

  1. 좌측 테이블 개수 확인(강사: 9개 언급)
  2. 삽입 > 표로 만든 뒤,
  3. 끝 칸이 부족하면
    • 마지막 셀에서 Tab 누르면 자동으로 칸 추가

4-2. 스타일 기준

  1. 라인 굵기: 0.5
  2. 테두리: 없음
  3. 글자색: 화이트
  4. 채우기: 블랙
  5. 폰트: 9pt
  6. 입력 예시(스크립트 흐름대로)
    • 브랜드패션 / 의류 / 뷰티 / 잡화 / 식품 / 마트 / 유아 / 가구·생활 / 건강·렌탈 / 가전·디지털 / 컴퓨터 / 스포츠·레저 / 자동차 / 여행 / 도서 … 등

4-3. 하단 배너 영역

  1. 하단부는 배너 영역이므로
    • 도형 채우기 > 패턴 채우기로 처리
  2. 좌측 영역(LNB)은 여기까지로 “구조 확정”

 

5) 키 비주얼(메인 배너) 영역 만들기

  1. 키 비주얼 영역은 큰 박스를 쭉 드래그해서 영역 확보
  2. 윤곽선: 없음
  3. 텍스트는 “정렬이 어려우면”
    • 텍스트 박스를 위에 얹어서 배치해도 됨
  4. 텍스트 처리 원칙
    • 텍스트 오브젝트를 굳이 가져오지 말고, 텍스트만 입력
    • (예: “CJ제일제당 X 농심”, “15% 할인”, “더울수록 더욱 시원한 3단 콤보 할인” 등)
  5. 하단에 붙는 배너/GMB성 요소는
    • 기존 오브젝트를 복사해서 재활용
  6. 테이블/리스트 영역이 있으면
    • 필요 시 열 삭제
    • 전체 맞춤 후 스타일 적용: 블랙 텍스트 / 화이트 배경 / 8pt
  7. 중간 구분선이 있으면
    • 안쪽 테두리로 열 라인 표현
  8. 중앙 오브젝트 박스는
    • 패턴 채우기, 윤곽선 없음
  9. 좌우 삼각형(화살표)이 있으면
    • 삼각형 도형으로 간단히 그려 추가

 

(( 6) “중요 텍스트 강조” 규칙 ))

  1. 강조해야 하는 문구가 있으면
    • 폰트 굵기 / 폰트 크기를 반드시 지정
  2. 이걸 안 하면
    • 디자이너가 “중요도”를 판단할 근거가 없고
    • 결과물에서 “왜 이렇게 안 했냐”를 말할 수 있는 기준도 사라짐

 

7) 폰트 오류 방지

  1. 작업 중 폰트가 틀어지면 레이아웃이 깨질 수 있음
  2. 해결 방식
    • 글꼴 바꾸기로 전체 선택 → 맑은 고딕으로 통일
  3. 초기에 조기 발견이 중요(뒤늦게 바꾸면 다 틀어짐)

 

8) 상품/가격 영역(표로 구성) 그리기

  1. 표는 우선 테두리 있음으로 만들어서 구조 잡기
  2. 이미지 자리(상단)는
    • 셀 병합
  3. 텍스트 자리도
    • 셀 병합
  4. 작업 방식 핵심
    • 지금은 “정확한 사이즈”보다
    • 열/행 구조(오브젝트 단위) 먼저 정의하는 단계
  5. 작업 중 판단 포인트
    • “행이 부족하네 / 열이 부족하네”를 쉽게 발견 가능
  6. 쿠폰/가격 표현
    • 2줄이면 엔터로 2줄 구성
    • 강조 금액(예: 1860원)은 폰트 사이즈 키움
    • 취소선(정가)은 취소선 처리
  7. 패턴 채우기/색 채우기 필요한 영역은
    • 블랙 + 패턴 채우기로 “이미지 영역” 느낌만 준다
    •  

9) 카드/상품 3개 정렬(맞춤 기능 활용)

  1. 3개 오브젝트가 들어가야 하는데 안 맞으면
    • 먼저 전체 영역 크기를 조정
  2. 끝과 끝(좌우)을 맞춘 뒤
  3. 3개 선택 → 그리기 도구 > 맞춤 > 가로 간격 동일하게
  4. 부족하면
    • 더 줄이거나 늘리면서 반복 조정

 

10) 반복되는 GNB/GMB는 “마스터로 고정”

  1. 메인을 다 그린 다음,
  2. 상단 GNB/GMB가 고정이라면
    • Ctrl + C로 복사
    • 보기 > 슬라이드 마스터 진입
    • 해당 마스터에 Ctrl + V로 붙여넣기
    • 필요하면 “빈 공간용 레이아웃”도 하나 확보
    • 마스터 보기 닫기
  3. 이후부터는
    • 고정된 상단 영역은 매번 그리지 않고
    • 마스터 기반으로 SB를 계속 제작

 

참고: 10-1. “폴더/버전 관리” 형식

  • SB를 항목별로 나눠 관리(예: “쿠폰/포인트” 화면이면)
    • 상단 메뉴 중 쿠폰/포인트만 색상 강조 처리
    • 해당 주제에 맞는 SB만 집중해서 제작
728x90