영상 튜토리얼: 정적 Figma 디자인에 비밀번호 걸기(영어)

이 영상에서는 Crypto 플러그인으로 Figma 디자인에 비밀번호 보호를 추가하는 방법을 보여 줘요.

Crypto의 “Static Frames” 기능은 Crypto Figma 플러그인으로 현재 Figma 페이지의 최상위 부모 프레임을 이미지로 업로드하고, 다른 사람과 공유할 수 있는 보안 URL과 비밀번호를 생성해요. 링크를 받은 사람은 Figma 계정이 없어도 Crypto 웹 앱에서 디자인을 볼 수 있어요.

이 기능을 사용하려면 먼저 Crypto 플러그인 툴바에서 Figma Designs (Static Frames) 를 선택했는지 확인하세요.

업로드할 프레임 선택 및 선택 해제

시작하려면 Crypto 플러그인 툴바에서 Figma Designs (Static Frames) 를 선택했는지 확인하세요.

이제 현재 Figma 페이지에서 비밀번호 보호 링크로 공유할 디자인으로 쓸 프레임을 선택할 수 있어요.

Crypto는 현재 Figma 페이지의 모든 “부모 프레임”을 플러그인에 프레임 목록으로 불러와요. 이 목록에서 공유할 디자인을 고르면 돼요. 프레임의 체크박스나 이미지 썸네일을 클릭하면 선택되고, 다시 클릭하면 선택이 해제돼요.

최상위 Figma 프레임이 필요해요. 정적 디자인을 업로드하려면 Figma 페이지에 “부모 프레임”이 하나 이상 있어야 해요. 부모 프레임이란 페이지 바로 아래에 있는 “프레임”을 말해요.

Figma 부모 프레임을 하이라이트해서 선택하기

비교할 Figma 부모 프레임을 더 쉽게 선택할 수 있도록, Figma 페이지에서 프레임을 클릭하거나 하이라이트하면 Crypto 플러그인의 프레임 목록이 해당 프레임으로 자동 필터링돼요.

Figma 부모 프레임 새로고침

Crypto 플러그인이 실행 중일 때 현재 Figma 페이지에서 부모 프레임을 추가하거나 삭제해야 한다면, 필요한 대로 수정한 다음 Crypto 플러그인 툴바의 프레임 수 옆에 있는 Refresh frames 아이콘 버튼을 클릭하세요.

빠른 정렬로 프레임 순서 정하기

업로드할 디자인의 프레임 순서는 여러 방법으로 정렬할 수 있어요.

Figma 레이어 순서로 정렬

Sort frames by Layer Order ↓ 옵션(역순은 ↑)을 선택하면 프레임 순서가 Figma 레이어 순서에 맞게 자동으로 정렬돼요.

열 기준 시각적 정렬

Sort frames Left to Right 또는 Sort frames Right to Left 옵션을 선택하면 Figma 디자인에서 프레임이 열 단위로 배치된 시각적 순서에 맞게 자동으로 정렬돼요.

행 기준 시각적 정렬

Sort frames Top to Bottom 또는 Sort frames Bottom to Top 옵션을 선택하면 Figma 디자인에서 프레임이 행 단위로 배치된 시각적 순서에 맞게 자동으로 정렬돼요.

시각적 정렬은 약간의 정렬 차이를 허용하며, 각 프레임의 캔버스 절대 위치를 사용해요. 서로 다른 Figma 섹션 안에 중첩된 프레임도 포함돼요.

Figma 레이어 이름 기준 정렬

Sort by Figma Layer Name ↓ 옵션(역순은 ↑)을 선택하면 Figma 레이어 이름에 따라 프레임이 자연 정렬 순서로 자동 정렬돼요. 그래서 Frame 2가 Frame 10보다 앞에 와요.

드래그 앤 드롭으로 프레임 순서 직접 정하기

드래그 앤 드롭으로 프레임 순서를 직접 정할 수 있어요. 프레임 행 끝에 있는 드래그 핸들 아이콘을 마우스로 클릭한 채 누르고, 위나 아래로 드래그해 업로드할 프레임 사이에서 순서를 옮긴 다음 놓으면 순서가 확정돼요. 이렇게 직접 정한 순서는 저장되므로 다른 정렬 옵션으로 바꿨다가도 정렬 선택 상자에서 Sort frames by Custom Order 옵션을 클릭하면 다시 불러올 수 있어요.

디자인 업로드

프레임 선택과 순서가 마음에 들면 Crypto 플러그인 툴바에서 Share Design URL 버튼을 클릭하세요. 공유 오버레이가 열리면 Securely Upload Designs 버튼을 클릭해 이미지 업로드를 시작하세요.

업로드가 끝나면 보안 URL과 생성된 비밀번호가 담긴 확인 메시지가 표시돼요.

Figma 파일을 복제하면 URL과 비밀번호도 함께 복사돼요. 복제한 파일에 다른 정보를 생성하려면 플러그인이 열려 있는 상태에서 코나미 커맨드(Up, Up, Down, Down, Left, Right, Left, Right, B, A)를 입력하세요. Crypto가 이전 URL을 삭제하지 않고 새 URL과 비밀번호를 만들어요.

생성된 URL 열기

업로드가 끝나면 보안 URL과 비밀번호를 복사해 Figma에서 선택한 프레임을 브라우저의 Crypto 웹 앱에서 볼 수 있어요.

각 업로드는 업로드를 시작한 Figma 페이지에 속해요. 페이지를 바꾸면 해당 페이지의 설정과 버전 기록이 불러와져요. 어떤 페이지에서 완료한 업로드를 찾으려면 원래 페이지로 돌아가세요. 같은 페이지에서 다른 업로드를 시작하기 전에 진행 중인 업로드나 설정 업데이트가 끝날 때까지 기다리세요.

URL과 비밀번호 정보는 나중에 플러그인에서 다시 확인할 수 있어요. 나중에 URL과 비밀번호를 다시 복사해야 한다면 Crypto 플러그인 툴바에서 Share Design URL 버튼을 클릭한 다음 Select Previous Version 선택 상자에서 이전에 업로드한 버전을 선택하세요. 그러면 Secure URL Details 섹션에 해당 URL의 URL과 비밀번호 정보가 표시되어 복사할 수 있어요.

새 버전 URL 업로드

디자인을 처음 업로드한 뒤에는 새 URL을 계속 업로드해 디자인의 버전을 만들 수 있어요. 디자인의 여러 단계를 기록해 두거나, 서로 다른 프레임 세트를 보여 주는 URL을 따로 만들 때 유용해요.

새 버전 URL을 만들려면 Crypto 플러그인 툴바에서 Share Design URL 버튼을 클릭한 다음 Upload New Version URL 버튼을 클릭하세요.

업로드가 끝나면 새 보안 URL 버전과 비밀번호가 담긴 확인 메시지가 표시돼요.

URL과 비밀번호 정보는 나중에 플러그인에서 다시 확인할 수 있어요. 나중에 URL과 비밀번호를 다시 복사해야 한다면 Crypto 플러그인 툴바에서 Share Design URL 버튼을 클릭한 다음 Select Previous Version 선택 상자에서 이전에 업로드한 버전을 선택하세요. 그러면 Secure URL Details 섹션에 해당 URL의 URL과 비밀번호 정보가 표시되어 복사할 수 있어요.

이전에 업로드한 Crypto 버전 URL 업데이트

이미 업로드해서 누군가에게 보낸 이전 버전의 Crypto URL을 업데이트하고 싶을 때가 있어요. Crypto 플러그인 툴바에서 Share Design URL 버튼을 클릭하고 Select Previous Version 선택 상자에서 이전에 업로드한 버전을 선택한 다음 Update Version xxxxxxxx URL 버튼을 클릭하면 이전에 업로드한 URL을 업데이트할 수 있어요.

그러면 이전에 업로드한 URL의 디자인이 Crypto 플러그인에서 새로 선택한 프레임으로 바뀌어요. URL과 비밀번호는 바뀌지 않으므로 기존 정보를 가진 사람은 계속 그대로 사용할 수 있어요.

업로드가 끝나면 새 보안 URL 버전과 비밀번호가 담긴 확인 메시지가 표시돼요.

URL과 비밀번호 정보는 나중에 플러그인에서 다시 확인할 수 있어요. 나중에 URL과 비밀번호를 다시 복사해야 한다면 Crypto 플러그인 툴바에서 Share Design URL 버튼을 클릭한 다음 Select Previous Version 선택 상자에서 이전에 업로드한 버전을 선택하세요. 그러면 Secure URL Details 섹션에 해당 URL의 URL과 비밀번호 정보가 표시되어 복사할 수 있어요.

URL을 업데이트하면 이전에 업로드한 디자인이 대체돼요. Update Version xxxxxxxx URL 버튼을 클릭하면 선택한 버전에 업로드된 디자인이 모두 대체돼요. 이전 URL과 비밀번호를 가진 사람은 전에 받은 URL을 다시 방문하면 업데이트된 디자인을 보게 돼요.

Crypto URL 비밀번호 변경

Crypto 플러그인은 기본적으로 안전한 무작위 비밀번호를 생성해요. 직접 정한 비밀번호로 바꾸려면 업로드 설정 패널의 Set Password for Crypto URLs on this page 섹션에서 Change Password 토글을 켜고, 입력란에 새 비밀번호(최소 6자)를 입력한 다음 Set New Password 버튼을 클릭하세요. 이 Figma 페이지의 Crypto URL 비밀번호가 업데이트돼요.

정적 디자인 URL과 프로토타입 URL은 Figma 페이지마다 같은 비밀번호를 사용해요. 같은 Figma 페이지에서 정적 디자인과 프로토타입을 모두 업로드한다면, 각 Figma 페이지에는 두 URL에 공통으로 쓰이는 비밀번호가 하나뿐이라는 점에 유의하세요. 한쪽의 비밀번호를 바꾸면 다른 쪽도 함께 바뀌어요.

비밀번호를 업데이트하면 이전 비밀번호를 가진 사람은 접근할 수 없어요. 비밀번호를 업데이트하면 이전 비밀번호를 가진 사람은 URL을 볼 수 없어요. 계속 접근할 수 있어야 한다면 새 비밀번호를 다시 공유해 주세요.

Crypto 버전 URL 삭제

Crypto 플러그인으로 생성한 보안 URL은 어떤 버전이든 삭제할 수 있어요. Crypto 플러그인 툴바에서 Share Design URL 버튼을 클릭하고 Select Previous Version 선택 상자에서 이전에 업로드한 버전을 선택한 다음 I would like to delete the xxxxxxxx version URL 토글을 켜세요. 토글을 켜면 Delete Version xxxxxxxx URL 버튼을 클릭할 수 있어요.

선택한 버전이 삭제되었다는 확인 메시지가 표시돼요.

버전 URL 삭제는 되돌릴 수 없어요 Delete Version xxxxxxxx URL 버튼을 클릭하면 선택한 버전에 업로드된 디자인이 모두 삭제돼요. 해당 URL을 가진 사람은 더 이상 디자인을 볼 수 없어요. 다만 이전 URL을 삭제한 뒤 언제든 새 버전을 업로드해 새 URL을 다시 공유할 수 있어요.

정적 Figma 디자인 보기

디자인에 로그인하기

Crypto Figma 플러그인에서 받은 URL을 웹 브라우저에서 열고, Crypto Figma 플러그인에서 생성된 비밀번호를 붙여 넣으세요. 비밀번호를 붙여 넣은 다음 Login 버튼을 클릭하면 인증되어 업로드된 디자인을 볼 수 있어요.

디자인의 프레임 탐색

Crypto 웹 앱에서는 화살표 아이콘 버튼을 클릭하거나, 프레임을 클릭한 채로 왼쪽이나 오른쪽으로 드래그하거나, 키보드의 왼쪽 화살표 또는 오른쪽 화살표 키를 눌러 프레임 사이를 이동할 수 있어요. 키보드의 스페이스 키를 눌러도 다음 프레임으로 넘어가요.

디자인의 특정 프레임으로 바로 이동

업로드한 디자인에서 특정 프레임으로 바로 이동하려면 Crypto 웹 앱 페이지 하단의 내비게이션 바를 사용하세요. 내비게이션 바에 마우스를 올리면 각 프레임의 썸네일이 나타나고, 썸네일을 클릭하면 해당 프레임으로 바로 이동해요.

업로드한 디자인 버전 간 전환

Crypto Figma 플러그인으로 디자인을 여러 버전 업로드했다면, Crypto 웹 앱 페이지 왼쪽 위의 선택 상자 제목을 클릭해 버전 사이를 바로 전환할 수 있어요. 다른 버전을 선택하면 해당 버전의 디자인이 불러와져요. 선택 상자 아래의 레이블에서 각 버전이 마지막으로 업데이트된 시점도 확인할 수 있어요.

다크 모드 전환

디자인이 어두운 배경에서 더 잘 보인다면 Crypto 웹 앱 툴바의 해 또는 달 아이콘을 클릭해 다크 모드를 켜세요. 아이콘을 클릭할 때마다 다크 모드와 기본(밝은) 모드가 전환돼요.

바깥 요소 표시 전환

디자인을 보는 동안 제목, 화살표 아이콘, 내비게이션 바, 아이콘 툴바를 숨기고 싶다면 Crypto 웹 앱 툴바의 표시 아이콘 버튼을 클릭하세요. 이 아이콘 버튼을 클릭하면 디자인을 제외한 모든 요소의 표시 여부가 전환돼요.