시작하기 전에
이 기능을 사용할 수 있는 사용자
Figma Make는 유료 요금제의 풀 시트에서 사용할 수 있습니다.
다른 시트와 요금제에서 Figma Make를 사용해 볼 수 있습니다.
작동 가능한 프로토타입, 웹 앱 또는 대화형 UI를 전 세계와 공유할 준비가 되었다면 이를 게시할 수 있습니다. 게시하면 작동 가능한 프로토타입이나 웹 앱을 자체 전용 URL로 공개 웹에서 사용할 수 있게 됩니다.
게시한 후, 작동 가능한 프로토타입이나 웹 앱을 점진적으로 변경하거나, 게시를 취소하여 공개 웹에서 제거할 수 있습니다.
웹 앱에 사용자 지정 도메인을 할당할 수도 있습니다. 할당할 수 있는 사용자 지정 도메인 수는 요금제에 따라 결정됩니다. 한도는 Figma Sites와 공유됩니다.
참고: Figma Make의 게시 기능은 관리자 설정을 통해 끌 수 있습니다. Figma Make에서 Publish(게시하기) 버튼이 비활성화되어 게시할 수 없다면, 이는 팀이나 오거니제이션에서 게시 기능을 꺼 두었기 때문입니다.
작동 가능한 프로토타입 또는 웹 앱 게시
참고: 게시하기 전에 작동 가능한 프로토타입 또는 웹 앱의 모든 콘텐츠에 대한 권리를 가지고 있으며 Figma의 이용 목적 제한 방침을 따르고 있는지 확인하세요. Figma Make에서 제공하는 이미지는 Unsplash에서 제공됩니다. Figma Make에서 제공하는 이미지를 사용하려는 경우, 해당 이미지가 귀하의 특정 사용 목적에 적합한지 검토할 책임은 사용자에게 있습니다. 해당 이미지는 https://unsplash.com/terms에 명시된 Unsplash 이용 약관의 적용을 받습니다.
작동 가능한 프로토타입 또는 웹 앱을 게시하려면 다음 안내를 따르세요.
- 게시하려는 Figma Make 파일을 엽니다.
- 오른쪽 상단 모서리에서 Publish(게시하기)를 클릭합니다.
- Publish(게시하기) 모달에서 제목을 설정합니다.
- 원하는 경우 Figma Make 인터페이스의 오른쪽 상단 모서리에서 Make settings(Make 설정)를 클릭하여 사이트의 추가 설정을 변경합니다.
- Publish를 클릭합니다.
'게시하기'를 클릭하면 작동 가능한 프로토타입 또는 웹 앱이 공개 웹에서 사용할 수 있게 됩니다. Figma Make는 무작위로 생성된 공개 URL을 제공하며, 이를 통해 게시한 작동 가능한 프로토타입이나 웹 앱에 액세스하고 다른 사람과 공유할 수 있습니다. 생성된 URL은 다음과 같은 형식이 됩니다. three-random-words.figma.site
참고: 가끔 작동 가능한 프로토타입이나 웹 앱이 게시에 실패할 수 있습니다. 이러한 문제가 발생한다면, 몇 분 기다린 후 다시 시도해 보시기 바랍니다.
작동 가능한 프로토타입이나 웹 앱을 게시하면 게시 창에 다음과 같은 내용이 표시됩니다.
- Figma에서 자동 생성된 웹 앱의 URL. 게시된 작동 가능한 프로토타입 또는 웹 앱을 방문하려면 URL을 클릭합니다. 원하는 경우 이제 맞춤형 도메인을 사용하도록 전환할 수 있습니다.
- 상태는 Published(게시됨)입니다.
- 마지막 게시일을 표시하는 새로운 필드.
중요: Figma Make를 통해 이미지를 사용하거나 게시할 때의 법적 의무를 이해하려면 변호사와 상담하시기 바랍니다. 법적 요건을 충족하는지 확인하기 위해 이 지침만을 참고해서는 안 됩니다.
사용자로부터 수집한 정보(예: 사이트에 업로드된 자료, 방문자 정보 등)에 대한 책임은 전적으로 귀하에게 있으며, 해당 데이터를 관련 법규에 따라 적절하게 관리해야 합니다.
게시된 작동 가능한 프로토타입 또는 웹 앱 업데이트
기존 콘텐츠를 수정해야 하는 경우, 작동 가능한 프로토타입이나 웹 앱에 업데이트를 게시할 수 있습니다.
작동 가능한 프로토타입, 웹 앱 또는 인터랙티브 UI에 대한 모든 변경 사항은 게시된 버전을 업데이트한 후에만 나타납니다. 예를 들어, 웹 앱의 인터페이스가 변경되면, 그 변경 사항은 업데이트를 게시하기 전까지 게시된 작동 가능한 프로토타입이나 웹 앱에 나타나지 않습니다.
변경 사항을 게시하려면 작동 가능한 프로토타입 또는 웹 앱 게시하기의 동일한 지침을 따릅니다. 그런 다음 Publish(게시하기) 모달에서 Update(업데이트)를 클릭합니다.
사용자 지정 도메인 추가
Figma Make에서 게시한 작동 가능한 프로토타입이나 웹 앱에 무작위로 생성된 URL 대신 원하는 URL을 사용하려면, 사용자 지정 도메인을 설정할 수 있습니다. 예를 들어, 사용자 지정 도메인을 추가하면 게시된 작동 가능한 프로토타입이나 웹 앱의 URL로 https://www.yourdomain.com을 지정할 수 있습니다.
사용자 지정 도메인을 할당하려면 사이트의 사용자 지정 도메인 관리하기에 있는 단계를 따르세요. 단계는 Figma Make와 동일합니다.
작동 가능한 프로토타입 또는 웹 앱 게시 취소
작동 가능한 프로토타입 또는 웹 앱을 게시 취소하면 공개 웹에서 제거됩니다. 나중에 다시 게시하기로 하는 경우, Figma에서 동일한 URL을 재사용하게 됩니다. 게시 취소하려면 다음 안내를 따르세요.
- 게시 취소하려는 작동 가능한 프로토타입 또는 웹 앱의 Figma Make 파일에서 오른쪽 상단 모서리에 있는 Make settings(Make 설정)를 클릭합니다.
- Unpublish(게시 취소)를 클릭합니다.
Publish 모달
Publish(게시하기) 모달에는 현재 제목, URL, 그리고 상태(게시됨 또는 게시되지 않음)가 포함되어 있습니다.
Publish(게시하기) 모달에는 다음이 포함됩니다.
-
제목: 브라우저 탭, 검색 엔진 결과, 소셜 미디어에 표시되는 작동 가능한 프로토타입 또는 웹 앱의 제목입니다. 제목을 추가하면 사람들이 어떤 사이트를 보고 있는지 쉽게 파악할 수 있고, SEO와 접근성도 함께 향상됩니다.
-
URL: 작동 가능한 프로토타입이나 웹 앱이 게시된 적이 없는 경우 예시 URL이 표시됩니다. 그렇지 않으면 게시된 작동 가능한 프로토타입 또는 웹 앱의 실제 URL이 표시됩니다. 게시되지 않은 경우 표시된 URL은 변하지 않지만, 공개 웹에서는 더 이상 활성화되지 않습니다.
-
상태: 기본 상태는 Not published(게시되지 않음)입니다. 작동 가능한 프로토타입 또는 웹 앱이 게시된 경우 Published(게시됨)로 표시됩니다.
Make 설정 모달
기능성 프로토타입이나 웹 앱을 게시하기 전후에 설정할 수 있는 다양한 고급 옵션이 있습니다. Figma Make 인터페이스의 오른쪽 상단 모서리에서 Make 설정 모달을 보려면, Make 설정을 클릭하세요.
Make settings(Make 설정) 모달은 게시된 작동 가능한 Make 프로토타입이나 웹 앱의 메타데이터와 검색 가능성을 지정하는 곳입니다. Make settings(Make 설정) 모달에서 작동 가능한 프로토타입의 게시 여부를 확인하고, 게시 및 게시 취소하며, 다음 사항을 설정할 수 있습니다.
제목
Title(제목) 설정을 사용하여 게시된 작동 가능한 프로토타입이나 웹 앱에 제목을 지정하세요. 제목은 브라우저 탭, 검색 엔진 결과, 소셜 미디어에 나타납니다. 제목을 추가하면 사용자가 브라우저에서 현재 어떤 페이지에 있는지 쉽게 파악할 수 있고, SEO와 접근성도 함께 향상됩니다.
메타 설명
Meta description(메타 설명) 설정을 사용해 게시된 작동 가능한 프로토타입 또는 웹 앱에 대한 설명을 제공합니다. Meta description(메타 설명)은 웹사이트나 페이지의 내용을 간단히 요약한 것으로, 검색 엔진 결과 페이지(SERP)에서 사용자의 관심을 끌고 클릭률을 높이기 위해 만들어졌습니다.
언어
Language(언어) 설정을 사용해 작동 가능한 프로토타입이나 웹 앱의 콘텐츠 기본 언어를 지정하세요. 작동 가능한 프로토타입이나 웹 앱의 언어 코드를 설정하면 접근성이 향상되고, 주요 언어를 명확히 표시하여 브라우저 번역 기능을 지원합니다.
ISO 언어 코드는 각 언어에 고유한 식별자를 부여합니다. 가장 흔한 언어 코드로는 다음과 같은 것들이 있습니다.
- ar – 아랍어
- de – 독일어
- en – 영어
- es – 스페인어
- fr – 프랑스어
- ja – 일본어
- hi – 힌디어
- ru – 러시아어
- pt – 포르투갈어
- zh – 중국어
위키백과에서 ISO 언어 코드의 전체 목록을 확인하세요.
Google 애널리틱스 ID
Google 애널리틱스 ID 설정을 사용하여 Google 애널리틱스 사용 지표를 캡처하세요. Google 애널리틱스 속성에 연결하면 사람들이 게시된 웹사이트를 어떻게 사용하는지 파악할 수 있습니다.
Google 애널리틱스 ID를 찾는 방법은 Google의 안내를 참조하세요.
참고: 현재는 Google 애널리틱스만 지원되지만, 향후 더 많은 분석 제공업체를 지원할 계획입니다. 작동 가능한 프로토타입이나 웹 앱의 head와 body 사용자 지정 코드 설정을 사용하면, Figma에서 직접 지원하지 않는 다른 분석 플랫폼용 코드 스니펫을 제공할 수 있습니다.
작동 가능한 프로토타입이나 웹 앱이 쿠키, 개인정보 보호, 데이터 수집 관련 법률을 포함한 모든 관련 법률을 준수하는지 확인하는 책임은 귀하에게 있습니다.
검색 엔진 결과에서 모든 페이지 제외
검색 엔진 결과에서 모든 페이지 제외 설정을 활성화하면, 검색 엔진 로봇이 작동 가능한 프로토타입이나 웹 앱을 색인하지 않고 검색 결과에 표시하지 않도록 지시할 수 있습니다.
게시된 작동 가능한 프로토타입이나 웹 앱의 헤더에 <meta name="robots" content="noindex"> 태그를 추가하려면 확인란을 선택하세요.
파비콘
Favicon(파비콘) 설정을 사용해서 파비콘으로 사용할 이미지를 업로드하세요. 파비콘은 브라우저 탭, 검색 결과, 북마크 등에서 게시된 작동 가능한 프로토타입이나 웹 앱을 작은 아이콘으로 시각적으로 표시합니다. 32px x 32px 크기의 이미지를 사용하는 것이 좋습니다.
소셜 공유 이미지
Social sharing image(소셜 공유 이미지) 설정을 사용하면 게시된 작동 가능한 프로토타입 또는 웹 앱이 소셜 미디어에서 공유될 때 표시될 이미지를 업로드할 수 있습니다. 폭 1200px, 높이 630px 크기의 이미지를 사용하는 것이 좋습니다.
사이트 head 및 body 사용자 지정 코드
작동 가능한 프로토타입이나 웹 앱의 head 또는 body 태그의 시작 또는 끝 부분에 사용자 지정 코드 스니펫을 추가할 수 있습니다.
예를 들어, 분석 태그와 같은 중요한 태그는 head에 로드하여 초기에 실행되도록 하고, 채팅 위젯과 같은 중요도가 낮은 요소는 body의 끝부분에 배치하여 작동 가능한 프로토타입이나 웹 앱의 주요 콘텐츠가 느려지는 것을 방지할 수 있습니다.