시작하기 전에
이 기능을 사용할 수 있는 사용자
Figma Make는 유료 요금제의 풀 시트에서 사용할 수 있습니다.
다른 시트 및 요금제에서 Figma Make를 사용해 볼 수 있습니다.
에듀케이션 요금제에는 하나의 게시된 Figma Make 파일이 포함되며, 여기에는 대역폭 제한이 적용됩니다.
작동 가능한 프로토타입, 웹 앱 또는 대화형 UI를 전 세계와 공유할 준비가 되었다면 이를 게시할 수 있습니다. 게시하면 작동 가능한 프로토타입이나 웹 앱을 자체 전용 URL로 공개 웹에서 사용할 수 있게 됩니다.
게시한 후, 작동 가능한 프로토타입이나 웹 앱을 점진적으로 변경하거나, 게시를 취소하여 공개 웹에서 제거할 수 있습니다.
웹 앱에 사용자 지정 도메인을 할당할 수도 있습니다. 할당할 수 있는 사용자 지정 도메인 수는 요금제에 따라 결정됩니다. 한도는 Figma Sites와 공유됩니다.
작동 가능한 프로토타입 또는 웹 앱 게시
참고: 게시하기 전에 작동 가능한 프로토타입 또는 웹 앱의 모든 콘텐츠에 대한 권리를 가지고 있으며 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(게시 취소)를 클릭합니다.
참고: 유료 요금제에서 무료 요금제로 다운그레이드하면 이전에 웹 또는 Figma 커뮤니티에 게시된 모든 Figma Make 파일은 figma.site 하위 도메인에 계속 게시되어 사용 가능하게 됩니다.
Publish 모달
Publish(게시하기) 모달에는 다음이 포함됩니다.
- 제목: 브라우저 탭, 검색 엔진 결과, 소셜 미디어에 표시되는 작동 가능한 프로토타입 또는 웹 앱의 제목입니다. 제목을 추가하면 사람들이 어떤 사이트를 보고 있는지 쉽게 파악할 수 있고, SEO와 접근성도 함께 향상됩니다.
- URL: 작동 가능한 프로토타입이나 웹 앱이 게시된 적이 없는 경우 예시 URL이 표시됩니다. 그렇지 않으면 게시된 작동 가능한 프로토타입 또는 웹 앱의 실제 URL이 표시됩니다. 게시되지 않은 경우 표시된 URL은 변하지 않지만, 공개 웹에서는 더 이상 활성화되지 않습니다.
- 상태: 기본 상태는 Not published(게시되지 않음)입니다. 작동 가능한 프로토타입 또는 웹 앱이 게시된 경우 Published(게시됨)로 표시됩니다.
- 누가 열람 가능(오거니제이션 및 엔터프라이즈 요금제 전용): 웹에서 모든 사람이 사용할 수 있도록 앱을 게시하거나 내부 사용자에게만 접근을 제한할 수 있습니다.
Make 설정 모달
기능성 프로토타입이나 웹 앱을 게시하기 전후에 설정할 수 있는 다양한 고급 옵션이 있습니다. Figma Make 인터페이스의 오른쪽 상단 모서리에서 Make 설정 모달을 보려면, Make 설정을 클릭하세요.
Make settings(Make 설정) 모달은 게시된 작동 가능한 Make 프로토타입이나 웹 앱의 메타데이터와 검색 가능성을 지정하는 곳입니다. Make settings(Make 설정) 모달에서 작동 가능한 프로토타입의 게시 여부를 확인하고, 게시 및 게시 취소하며, 다음 사항을 설정할 수 있습니다.
- 제목
- 메타 설명
- 언어
- Google 애널리틱스 ID
- 검색 엔진 결과에서 모든 페이지 제외
- 파비콘
- 게시된 앱에 대한 액세스 관리
- 소셜 공유 이미지
- 사이트 head 및 body 사용자 지정 코드
제목
Title(제목) 설정을 사용하여 게시된 작동 가능한 프로토타입이나 웹 앱에 제목을 지정하세요. 제목은 브라우저 탭, 검색 엔진 결과, 소셜 미디어에 나타납니다. 제목을 추가하면 사용자가 브라우저에서 현재 어떤 페이지에 있는지 쉽게 파악할 수 있고, SEO와 접근성도 함께 향상됩니다.
제목을 기재하지 않으면 Figma에서 자동으로 생성합니다.
메타 설명
Meta description(메타 설명) 설정을 사용해 게시된 작동 가능한 프로토타입 또는 웹 앱에 대한 설명을 제공합니다. Meta description(메타 설명)은 웹사이트나 페이지의 내용을 간단히 요약한 것으로, 검색 엔진 결과 페이지(SERP)에서 사용자의 관심을 끌고 클릭률을 높이기 위해 만들어졌습니다.
설명이 제공되지 않으면, Figma가 자동으로 설명을 생성합니다.
언어
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(파비콘) 설정을 사용해서 파비콘으로 사용할 이미지를 업로드하세요. 파비콘은 브라우저 탭, 검색 결과, 북마크 등에서 게시된 작동 가능한 프로토타입이나 웹 앱을 작은 아이콘으로 시각적으로 표시합니다. 48px x 48px 크기의 이미지를 사용하는 것이 좋습니다.
게시된 Sites의 액세스 관리
게시된 앱에 접근할 수 있는 사람 선택(오거니제이션, 엔터프라이즈)
오거니제이션 및 엔터프라이즈 요금제에서는 애플리케이션을 오픈 웹에 게시할지, 내부 사용자로 제한할지 선택할 수 있습니다. 파일이 내부에 게시된 경우:
- 로그인한 조직 구성원이라면 누구나 볼 수 있습니다.
- 게스트 및 조직 외부의 모든 사람은 접근할 수 없습니다.
참고: 대상을 웹의 모든 사용자(Anyone on the web)로 설정하는 옵션이 없는 경우, 관리자가 공개 인터넷 환경에 게시하는 기능을 비활성화했을 수 있습니다.
비밀번호 보안 기능 추가
비밀번호 보안 기능이 활성화되면 방문자가 제목, 설명 등의 메타데이터를 포함한 게시된 웹 앱의 내용을 보려면 반드시 비밀번호를 입력해야 합니다.
자신만의 비밀번호를 생성하거나 Figma가 자동으로 생성한 비밀번호를 사용할 수 있습니다.
- 생성할 비밀번호는 최소 4개의 문자를 사용해야 하며 모든 유형의 문자를 포함할 수 있습니다.
- Figma에서 생성한 비밀번호는 네 개의 무작위 단어를 조합하며, 강력하고 고유합니다.
비밀번호는 저장하자마자 게시된 웹 앱에 자동으로 적용됩니다. 변경 사항이 효과를 발휘하는 데 1분 정도 걸릴 수 있지만, 재게시할 필요는 없습니다.
참고: 검색 엔진 결과에서 제외되지 않은 게시된 웹 앱에 비밀번호를 추가할 경우, 일부 메타데이터가 검색 목록에 계속 나타날 수 있습니다. 비밀번호 보안 기능이 활성화되면 검색 엔진은 더 이상 웹 앱의 콘텐츠를 색인화할 수 없으며, 일반적으로 시간이 지남에 따라 결과에서 사라집니다. 이 과정을 앞당기고 싶다면 Google Search Central을 통해 삭제를 요청할 수 있습니다.
일단 설정하면 비밀번호를 다시 볼 수 없습니다. 까먹고 복사해 두지 않았다면, 비밀번호를 새로 생성해야 합니다. 비밀번호를 변경하면 이전에 액세스 권한이 있던 사용자도 다음에 웹 앱을 새로고칠 때 새 비밀번호를 입력해야 합니다.
참고: 비밀번호 설정 시 몇 가지 제한이 있을 수 있습니다.
- 비밀번호를 직접 작성할 수 없는 경우, 조직에서 자동 생성된 비밀번호만 사용하도록 요구한 상황일 가능성이 높습니다. 조직은 모든 게시된 사이트에 대해 비밀번호 보안을 요구할 수도 있습니다.
- 대상자가 내부 전용으로 설정되어 있는 경우 비밀번호를 추가할 수 없습니다.
소셜 공유 이미지
Social sharing image(소셜 공유 이미지) 설정을 사용하면 게시된 작동 가능한 프로토타입 또는 웹 앱이 소셜 미디어에서 공유될 때 표시될 이미지를 업로드할 수 있습니다. 폭 1200px, 높이 630px 크기의 이미지를 사용하는 것이 좋습니다. 소셜 공유 이미지가 제공되지 않는 경우, Figma는 대신 앱의 이미지 스냅샷을 사용합니다.
사이트 head 및 body 사용자 지정 코드
작동 가능한 프로토타입이나 웹 앱의 head 또는 body 태그의 시작 또는 끝 부분에 사용자 지정 코드 스니펫을 추가할 수 있습니다.
예를 들어, 분석 태그와 같은 중요한 태그는 head에 로드하여 초기에 실행되도록 하고, 채팅 위젯과 같은 중요도가 낮은 요소는 body의 끝부분에 배치하여 작동 가능한 프로토타입이나 웹 앱의 주요 콘텐츠가 느려지는 것을 방지할 수 있습니다.
자주 묻는 질문
앱 링크를 공유하면 오래되었거나 잘못된 메타데이터가 표시됩니다. 어떻게 고칠 수 있나요?
일단, 업데이트된 메타데이터를 포함하여 앱의 최신 버전을 게시했는지 확인하세요. 모든 것이 게시되었으나 다른 플랫폼에서 여전히 오래된 정보가 표시된다면, 캐싱 때문일 가능성이 큽니다.
대부분의 소셜 플랫폼은 URL이 처음 공유될 때 제목, 설명, 미리보기 이미지와 같은 링크 메타데이터를 캐시합니다. 페이지를 업데이트한 후에도 이러한 플랫폼은 계속해서 이전 데이터를 표시할 수 있습니다. 미리보기를 새로 고치려면 플랫폼의 디버깅 또는 미리보기 도구에서 URL을 실행하여 "캐시를 갱신(bust the cache)"하고 최신 메타데이터를 강제로 다시 스크레이핑하게(re-scrape) 할 수 있습니다.
메타데이터를 새로 고치는 도구:
- Facebook: Sharing Debugger(공유 디버거)
- LinkedIn: Post Inspector(게시물 검사기)
- X (트위터): Card Validator(카드 검증기)
-
Slack: 미리 보기가 시간이 지남에 따라 자동으로 새로 고쳐지거나, 약간 수정된 링크를 공유하여 강제로 새롭게 펼칠 수 있습니다(예: URL 끝에
?v=2추가하기).