새파일
Plain Text
복사
다음은 제공된 출처와 대화 기록을 바탕으로 "새 작업 창 생성 (Drafts > Design)"과 피그마 작업 환경 전반에 대한 내용을 문서로 정리한 것입니다.
피그마 작업 환경 이해 및 상세페이지 제작 준비
1. 새 작업 창 생성 및 기본 환경 이해
1. ‘초안 > 디자인’ = 내 개인 작업실
•
내 프로젝트를 위한 작업실(화실)로 생각해봐요.
◦
이건 나중에 프로젝트에 옮겨서 공유하거나 협업 가능
•
파일 구조 (1개 파일 = 1 브랜드 또는 프로젝트)
•
적용예)
더하다+일상_상세페이지디자인.fig
오저씨_꿀템창고_상세페이지디자인.fig
2. ‘페이지(Page)’ = 인물화, 풍경화 등 그룹
•
한 디자인 파일 안에 여러 페이지를 만들 수 있어요.
•
예: 홈페이지 디자인, 모바일 디자인, 아이콘 시안 등 목적에 따라 페이지를 나눌 수 있어요.
•
적용예)
주방도구.fig
욕실도구.fig
•
적용예)
202508.fig
202509.fig
3. ‘프레임(Frame)’ = 실제 그림을 그린 도화지
•
프레임은 페이지 안에 실제로 디자인을 배치하는 작업 영역.
•
모바일 화면, 웹페이지, 팝업창처럼 화면 단위로 구성
•
디자이너들은 프레임마다 실제 기기 크기를 맞춰 UI를 설계합니다.
•
적용예)
컵브러시 상세페이지 작업 디자인
청소솔 상세페이지 작업 디자인
네이밍 규칙
관리번호_상품명_작업중/최종
1001_컵브러시_최종
•
새 작업 창 생성: 초안 > 디자인
•
작업 이름 변경: 새 작업 창은 기본적으로 'Untitled'로 되어 있으며, 왼쪽 위에 있는 'Untitled'를 더블클릭하여 원하는 이름으로 변경할 수 있습니다.
•
•
•
페이지 개념: '페이지(Page)'는 '컵브러시 상세페이지’이라는 전체 도화지 안에 있는 또 다른 도화지 개념입니다.
•
2.피그마 인터페이스 패널 이해
피그마 작업 창은 크게 세 가지 주요 패널로 구성되어 작업 흐름을 돕습니다:
•
왼쪽 창 (레이어 패널): 이 패널은 우리가 작업한 요소들이 나타나는 곳입니다. 네모, 글, 이미지 등 어떤 작업을 했는지 쉽게 볼 수 있으며, 프레임(종이 요소)을 생성하면 해당 요소가 왼쪽에 생기고 더블 클릭하여 이름을 바꿀 수 있습니다.
•
오른쪽 창 (속성 패널): 이 패널은 우리가 작업한 요소 하나하나를 변경할 수 있는 곳입니다. 예를 들어, 네모의 모서리를 둥글게 하거나, 글씨 크기를 조절하거나, 이미지를 교체하는 등 선택된 요소의 속성을 조절할 수 있습니다.
•
아래쪽 도구 모음 (도구 패널): 이 패널은 그림을 그릴 때 필요한 연필, 볼펜, 도형 등 다양한 도구들이 모여 있는 곳입니다. 사각형 도구로 네모를 그리거나, T 버튼(텍스트 버튼)을 사용하여 글자를 추가하는 등의 작업을 할 수 있습니다.
3. 캔버스 탐색 및 조작
작업의 효율성을 높이기 위해 캔버스를 쉽게 조작하는 방법을 아는 것이 중요!
민영 모든 프로그램이 비슷.
•
확대/축소: 컨트롤(Ctrl)을 누른 채로 마우스 휠을 굴리면 캔버스를 작게 또는 크게 조절할 수 있습니다.
•
좌우 이동: 쉬프트(Shift)를 누른 채로 마우스 휠을 굴리면 왼쪽 또는 오른쪽으로 이동할 수 있습니다.
•
좌우 이동: 쉬프트(Alt)를 누른 채로 마우스 휠을 굴리면 위쪽 또는 아래쪽으로 이동할 수 있습니다.
•
자유 이동: 스페이스바를 누르면 마우스 커서가 손바닥 모양으로 바뀌고, 이 상태에서 드래그하면 원하는 대로 캔버스를 움직일 수 있습니다.
단축키
Ctrl+마우스휠 : 작아졌다 커졌다
Shift+마우스휠 : 왼쪽 오른쪽
alt+마우스휠 : 위 아래
스페이스바+드래그 : 자유롭게 이동
Plain Text
복사
4. 상세페이지 제작 핵심 기능
•
프레임(종이) 생성 및 설정:
◦
프레임이 뭐라고 정의했지? 기억 안난다게 500원 건다. 실제 그림을 그린 도화지 —> 여기에 상품 상세페이지 작업을 합니다.
◦
페이지 안에 여러 상품의 도화지를 그릴 예정임.
◦
아래 도구 모음에서 격자 모양의 '프레임' 버튼을 누르고 드래그하여 종이를 만듭니다.
◦
오른쪽 창에 나타나는 설정 창에서 스마트스토어 가로 사이즈인 860 픽셀, 세로 1200 픽셀로 변경할 수 있습니다.
◦
왼쪽 창에서 해당 프레임의 이름을 '1001_컵브러쉬_작업중' 등으로 변경할 수 있습니다.
•
이미지 삽입 및 조절:
◦
도구 모음에서 사각형 도구를 선택해 프레임 안에 네모를 그립니다.
◦
◦
Shift를 누른 채로 모서리를 조절하면 비율을 유지하며 크기를 변경할 수 있습니다.
◦
네모를 선택한 상태에서 오른쪽 창 'Fill'의 컬러 박스를 클릭하여 색상을 변경하거나, 이미지 박스 버튼을 클릭하여 'Upload from computer'로 이미지를 삽입할 수 있습니다.
◦
◦
'Fill' 기능보다는 'Crop' 기능을 사용하는 것이 이미지의 자유로운 조절에 더 편리합니다.
◦
졸지말고 집중! 정리한 사람의 성의를 봐서라도 졸면 안되지.
•
텍스트 추가 및 서식 변경:
◦
아래 도구 모음에서 'T' 버튼(텍스트 버튼)을 클릭하고 글자를 넣고 싶은 곳을 클릭하여 텍스트를 입력합니다.
◦
오른쪽 창 'Typography'에서 글씨 크기, 굵기(regular에서 bold), 정렬(가운데 정렬) 등을 조절할 수 있습니다.
◦
◦
더하다 일상에서 사용할 폰트는 'Pretendard'!!! 폰트가 없다면, 구글에서 '눈누'를 검색하여 해당 사이트에서 폰트를 다운로드 및 설치.
◦
Alt 키를 누른 채로 텍스트를 드래그하면 쉽게 복사할 수 있어 작업 속도를 높일 수 있습니다.
◦
여러 요소를 드래그하여 선택한 후 오른쪽 창 'Layout'의 특정 아이콘('믐' 칸)에서 요소 간의 여백을 조절할 수 있습니다.
◦
•
스포이드 도구: 오른쪽 창 'Fill'에 있는 컬러 박스 옆의 스포이드 버튼을 눌러 이미지나 다른 요소의 색상을 추출하면 톤앤무드를 쉽게 맞출 수 있습니다.
•
•
페이지 배경색 변경: 빈 공간을 클릭한 후 오른쪽 상단 '페이지'에 있는 컬러 박스에서 배경색을 조절할 수 있습니다.
•
•
프레임 복사: 기존 프레임 제목('1001_컵브러쉬_작업중' 등)을 클릭하고 Alt를 누른 채로 드래그하면 프레임을 통째로 복사할 수 있습니다.
•
•
오토 레이아웃(Auto Layout): 피그마로 상세페이지를 만들 때 반드시 알아야 하는 기능으로, 글이나 이미지가 추가될 때 자동으로 요소들의 위치를 조정하여 편리하게 수정할 수 있게 해줍니다.
◦
적용 방법:
1.
사각형 도구를 이용해 '여백' 역할을 하는 네모들을 만듭니다.
2.
왼쪽 창에서 각 여백의 이름을 '여백1', '여백2' 등으로 변경하여 구분하기 쉽게 합니다.
3.
각 요소들(여백, 텍스트, 이미지 등)의 순서를 왼쪽 창에서 정렬합니다.
4.
모든 요소를 드래그하여 선택한 후, 오른쪽 마우스 클릭 → 'Add Auto Layout'을 클릭합니다. (이때 이미지까지 모두 선택되었는지 확인해야 합니다.)
5.
오른쪽 창 'Auto layout'에서 배열을 가운데 정렬 등으로 변경합니다.
6.
오토 레이아웃이 걸린 상태에서는 Ctrl을 누른 채로 클릭해야 각 요소를 하나씩 선택할 수 있습니다.
7.
오토 레이아웃이 제대로 적용되었는지 확인하려면, 텍스트 입력 후 엔터를 눌러 여백과 이미지가 자동으로 내려가는지 확인합니다.
8.
여백으로 사용한 네모들을 투명하게 만들려면, Ctrl을 누른 채로 해당 여백을 클릭한 후 오른쪽 창 'Appearance'에서 불투명도(Opacity)를 0으로 변경합니다.
볼땡에게 오토레이아웃 시연 및 레이어 개념 설명이 필요.
•
출력(Export):
◦
개별 프레임 출력: 해당 프레임 제목을 클릭하고 오른쪽 창 'Export'에서 원하는 이미지 파일 형식(PNG, JPG 등)을 선택한 후 'Export' 버튼을 눌러 출력합니다.
◦
여러 프레임 이어붙여 출력:
1.
출력할 프레임들을 적절히 배치하고, 아래 도구 모음에서 '프레임' 버튼을 클릭하여 두 프레임을 모두 감싸는 큰 프레임을 만듭니다.
2.
감싸는 프레임의 이름을 '1001_컵브러쉬_최종' 등으로 변경합니다.
3.
오른쪽 창 'Layout'에서 화살표가 안으로 들어가는 버튼을 클릭하여 프레임들을 딱 붙게 만듭니다.
4.
두 종이를 드래그하여 선택한 후, 오른쪽 창 'Layout'의 '믐' 칸에서 여백을 0으로 바꿔 완전히 붙입니다.
5.
감싸는 프레임 제목을 클릭하고 오른쪽 창 'Export'에서 파일 형식을 선택한 후 'Export' 버튼을 눌러 출력합니다.
6. 파일 저장 및 불러오기
•
자동 저장: 피그마는 작업 파일이 웹상에 자동으로 저장되므로, 홈 화면에서 파일을 더블클릭하기만 하면 불러올 수 있습니다.
•
로컬 저장: 작업 파일을 컴퓨터에 따로 저장하고 싶다면, 왼쪽 맨 위 피그마 로고를 클릭하고 '파일(File)'에서 'Save Local Copy'를 선택하여 원하는 위치에 저장할 수 있습니다.
•
로컬 파일 불러오기: 컴퓨터에 저장된 피그마 파일을 다시 불러오고 싶다면, 홈 화면에서 오른쪽 맨 위에 있는 'Create' 버튼을 클릭한 후 'Import' 버튼을 통해 파일을 가져올 수 있습니다.
•
템플릿 불러오기: 미리 만들어진 피그마 템플릿 파일을 'Import' 버튼을 통해 불러와서 작업에 활용할 수도 있습니다.
7. 기타 유용한 기능
•
전체 사이즈 일괄 변경: 복사한 프레임(예: 쿠팡용으로 복사한 상세페이지)의 제목을 클릭하고 아래 도구 모음에서 마우스 커서 모양 옆의 작은 화살표 버튼을 클릭한 후 'Scale'을 선택합니다. 오른쪽 창에 나타나는 'Scale' 창에서 가로 사이즈를 변경하면 전체 요소의 크기가 한 번에 조절됩니다 (예: 860픽셀에서 780픽셀로).
•
마무리 :
민영씨…이 정도의 핵심 기능만 알아도 상세페이지 제작이 가능할 것으로 생각됨. 오히려 잘 만들어진 템플릿을 가져와 우리 상품을 넣어 표현하는 것이 더 중요합니다.
브랜드의 정체성을 뚜렷하게 만들고 고객들이 그 상품을 구매할 수 있도록 만드는 본질적인 고민을 하는 것이 더 중요!!
8. 플러그인
가. 아이콘 소스
•
Iconify
•
CC BY : 출처표기 필수 , 즉 사용하지 마라
나. Remove BG
•
배경지우기
다. Unsplash
•
참고 이미지
단축키
Ctrl+Z : 작업취소
Ctrl+Y : 작업복구
Ctrl+마우스휠 : 작아졌다 커졌다
Shift+마우스휠 : 왼쪽 오른쪽
alt+마우스휠 : 위 아래
스페이스바+드래그 : 자유롭게 이동
Shift+드래그 : 비율 그대로 유지하면서 크기 조절
alt + 드래그 : 복사
프레임 = F
이미지 불러오기 = 컨트롤 쉬프트 K
SHFT + A : 오토레이아웃 (피그마 핵심기능)
Plain Text
복사
기능 구현을 위한 유튜버 자료
배경 그레디에이션 및 이미지 넣기
색상 라이브러리 등록하기
스마트스토어 —> 쿠팡용으로 리사이징
도입부파트
제품정의
전후
본문파트
문제해결 레이아웃
포인트 레이아웃
결론/기타
코어페이지에서 숏폼 제작 영상
상세페이지 만드는 전략(페이지부스터)