Site(사이트) - 반응형 웹 페이지 제작

1. 피그마 사이트란?

피그마 Site란, 플로우(Flow)나 프레이머(Framer)와 유사하게, 웹사이트를 직접 디자인하고 실제 외부로 배포(Publish)까지 가능하게 만들어주는 노코드 기반의 강력한 기능입니다.

다양한 템플릿 제공, 반응형 웹 연결, 인터랙션 연결, 그리고 프롬프트 기반의 제작까지 지원합니다. 일반적인 디자인 파일이 아니라 '사이트'라는 파일 형식으로 진행됩니다.

2. 사이트 환경 구성 및 기본 구조 설정

2.2. 사이트 시작 및 템플릿 활용

1. 새 사이트 만들기 피그마에서 + 버튼을 누르고 다섯 번째에 있는 '사이트(Site)'를 클릭하여 시작합니다.
2. 시작 옵션 빈 페이지인 '블랭크 사이트(Blank Site)'로 시작하거나, 제공되는 다양한 템플릿을 활용할 수 있습니다.

• 템플릿 카테고리는 현재 다섯 가지가 있으며, 랜딩 페이지 등 다양한 주제와 스타일로 구성되어 있습니다.
• 특정 템플릿을 클릭하면 미리보기 브라우저(Preview Browser)를 통해 실제 동작을 확인하고 퀄리티를 가늠할 수 있습니다.

3. 사이트 배포 (Publish)

• 왼쪽 상단의 '퍼블리시(Publish)' 버튼을 누르기 전, 사이트 이름을 설정합니다.
• '퍼블리시'를 누르면 해당 웹사이트가 공개되고 URL이 생성되어 다른 사람들도 방문할 수 있게 됩니다.

💡 퍼블리시 기능은 유료 계정에서 사용하실 수 있습니다.

2.2. 페이지 및 구조 관리

1. 웹페이지스 (Webpages) 웹으로 따지면 하나하나의 페이지를 의미합니다.
2. 페이지 관리 '웹페이지스' 부분에서 +를 눌러 새로운 페이지를 만들거나, 기존 페이지를 우클릭하여 복제 또는 삭제할 수 있습니다. (예: 홈, 어바웃, 블로그 등).

3. 핵심 반응형 디자인 기법

3.1. 브레이크 포인트 (Breakpoints) 이해 및 활용

1. 정의 화면 크기에 따라 콘텐츠의 배치를 다르게 하는 기준점을 의미합니다.
2. 설정 기본적으로 데스크탑과 모바일이 있으며, 오른쪽에 + 버튼을 눌러 태블릿이나 커스텀 분기점을 추가할 수 있습니다.

3. 반응형 조정

• 이 분기점에 따라서 패딩 값을 다르게 설정할 수 있습니다 (예: 데스크탑 64, 모바일 16).
• 특정 요소를 모바일에서는 숨기거나 (눈 꺼진 표시) 표시하는 등 표시 여부를 다르게 설정할 수 있습니다.
• 상단 미리보기 페이지를 통해 데스크탑, 태블릿, 모바일 화면을 빠르게 조정하며 확인할 수 있습니다.

3.2. 컴포넌트와 변형 (Variants) 활용

1. 컴포넌트 세트 생성 디자인에서처럼 요소(예: 헤더)를 선택하여 크리에이트 컴포넌트 셋(Create Component Set)을 만듭니다.
2. 베리언트 지정 해당 컴포넌트의 프로퍼티(Property)에 베리언트 값으로 '데스크탑'과 '모바일'을 지정합니다.
3. 재활용 인스턴스로 활용할 때, 프로퍼티 이름에 따라 데스크탑 모드나 모바일 모드로 자동으로 반영됩니다.

3.3. 변수 (Variables)를 이용한 최대 폭 관리

1. 변수 생성 베리어블스(Variables)에 들어가서 넘버(Number) 변수를 추가합니다.
2. 이름 및 값 설정 이름을 '콘텐츠 위스(Content Width)' 등으로 정하고 값(예: 1200 또는 1440)을 설정합니다.
3. 최대 폭 연결 섹션의 최대 폭(Max Width)에 이 변수를 연결해 줍니다. 이를 통해 전체 콘텐츠의 최대 폭을 일괄적으로 관리할 수 있습니다.
4. 핵심 주의사항 변수를 사용하여 최대 폭을 설정할 때는 가장 바깥쪽에 있는 프레임이 반드시 중앙 정렬로 배치되어 있어야 합니다.

4. 콘텐츠 연결 및 재활용

4.1. 페이지 및 외부 링크 연결 (인터랙션)

1. 페이지 링크 메인 컴포넌트(예: 내비게이션 메뉴)에서 원하는 버튼을 클릭하고 인터랙션(Interaction)의 링크(Link) 기능을 활용하여 해당 페이지 이름에 연결합니다 (예: '어바웃' 버튼을 '어바웃' 페이지에 연결).
2. 외부 링크 링크 설정 시 직접 URL(예: http://디자인베이스.co.kr)을 입력하고 '새 창 열기(Open in New Tab)'를 체크하여 외부 웹사이트로 연결할 수 있습니다.

4.2. 텍스트 스타일 관리

1. 스타일 추가 타이포그래피를 재활용하기 위해 텍스트 스타일을 추가할 수 있습니다.
2. 반응형 스타일 이 스타일은 데스크탑일 때와 모바일일 때 서로 다른 사이즈를 갖도록 설정이 가능하며, 적용 시 모바일 환경에 자동으로 반영됩니다.

5. 외부 콘텐츠 삽입 및 커스텀 제작

5.1. 임베드 (Embed) 기능 활용

1. 일반 임베드 HTML 코드를 직접 삽입할 수 있습니다.
2. 유튜브 임베드 유튜브 링크를 연결하여 웹사이트에 영상을 삽입하고 재생할 수 있습니다.
3. 지도 삽입

• 구글 지도 등에서 주소를 복사하여 로케이션 세팅스(Location Settings)에 입력합니다.
• 줌(Zoom) 값을 조정하여 지도의 확대 정도를 설정할 수 있습니다 (일반적으로 12에서 15 사이가 적당함).

5.2. 메이크 (Make) 기능 (프롬프트 기반 코드 컴포넌트)

코드 기반의 결과물을 만드는 기능입니다.

1. 템플릿 활용 미리 만들어진 코드 템플릿(예: 그라디언트 쉐이더)을 활용하여 캔버스에 추가할 수 있습니다.
2. 프롬프트 제작 특정 영역(레이어)을 선택하고 GPT처럼 텍스트 프롬프트를 입력하여 원하는 동적 요소(예: "움직이는 그라데이션 배경 만들어 줘")를 생성할 수 있습니다.
3. 속성 조정 생성된 코드 컴포넌트의 프로퍼티 영역에서 애니메이션 지속 시간(Animation Durations) 등 값을 조정할 수 있습니다.
4. 신선한 특징 사용자가 코드를 완전히 모르더라도 텍스트 입력만으로 코드 기반의 결과물을 웹사이트 요소에 적용할 수 있다는 점이 신선합니다.

6. 사이트 배포 및 추가 설정

1. SEO 기본 설정 사이트 설정(Settings)에서 타이틀, 메타 디스크립션, 언어 설정 등 SEO의 기본이 되는 부분을 설정할 수 있습니다.
2. 소셜 쉐어링 이미지 오픈 그래프 이미지(Open Graph Image)로 불리는 소셜 쉐어링 이미지를 설정하여 외부 공유 시 표시되는 이미지를 지정할 수 있습니다.
3. CMS (Content Management System)

• 콘텐츠를 구조화하고 관리하는 기능으로, 블로그나 포트폴리오 사이트 운영에 필수적입니다.

4. 최종 배포 모든 작업이 완료되면 상단의 '퍼블리시(Publish)' 버튼을 눌러 사이트를 최종적으로 공개합니다.