로그인해야 보이는 페이지를 피그마로 가져오기

피그마로 가져와야 하는 페이지는 대개 링크를 걸 수 없는 페이지입니다. URL을 넣으면 왜 로그인 폼이 돌아오는지, 그걸 넘어서는 도구들에서 무엇을 확인해야 하는지.

피그마로 정말 가져와야 하는 페이지는 대개 링크를 걸 수 없는 페이지입니다. 사내 어드민, 로그인해야 데이터가 채워지는 대시보드, 아직 공개하지 않은 스테이징 빌드 같은 것들이요. 변환기에 URL을 붙여넣으면 로그인 화면이 돌아옵니다. 그게 실제로 그쪽이 본 화면이거든요.

우회할 방법이 있는데 꼼수는 아니고 구조가 다른 겁니다. URL 방식이 왜 여기서 막히는지, 대안들이 실제로 무엇을 하는지, 비공개 페이지를 어떤 도구에 넣기 전에 무엇을 확인해야 하는지 정리해 볼게요.

URL을 붙여넣는 방식이 될 수 없는 이유

도구가 URL을 요구하면, 그 URL을 여는 건 도구 쪽에 있는 무언가입니다. 서버이거나 서버에서 돌아가는 헤드리스 브라우저죠. 그 기계는 자기 네트워크 위치와 자기 빈 쿠키 저장소를 가지고 있습니다. 당신이 아니에요.

그래서 익명 방문자로 대시보드에 도착하고, 익명 방문자가 받는 걸 정확히 받습니다. 로그인 폼이요. 몇 번을 다시 시도해도 달라지지 않습니다. 빠진 게 당신의 세션인데, 세션은 당신 브라우저 안에 있으니까요.

이 실패가 그렇게 일관적인 이유도 그겁니다. 누가 고칠 수 있는 버그가 아니에요. 서버는 당신이어야만 보이는 페이지를 볼 수 없습니다.

안 통하는 우회들

• 세션 쿠키를 도구에 붙여넣기. 헤더를 받아 주는 도구도 있습니다. 세션 토큰을 제3자에게 넘기는 게 얼마나 불편한 일인지는 접어 두더라도, 요즘 인증은 수명이 짧고 쿠키 하나에만 묶여 있지 않아서 대개 실패합니다.
• 페이지를 잠깐 공개로 돌리기. 스테이징이라면 가끔 가능합니다. 실제 운영 중인 것에는 거의 불가능하고, 페이지가 렌더링하는 내용 자체가 달라집니다.
• 스크린샷 찍고 따라 그리기. 그림이 남습니다. 피그마로 가져오는 이유가 편집 가능한 레이어인데 스크린샷에는 그게 없죠.

되는 방법: 이미 들어와 있는 브라우저에서 담기

변환이 내 탭 안에서 일어나면 세션 문제가 사라집니다. 해결한 게 아니라 애초에 생기지 않는 거예요. 페이지는 이미 눈앞에 렌더링돼 있습니다. 로그인된 채로, 데이터가 불러와진 채로, 메뉴는 내가 열어 둔 상태 그대로요. 거기서 도는 변환기는 내가 보는 걸 읽습니다.

브라우저 확장 기반 임포터들이 이 방식이고, 요즘은 여러 도구가 확장을 제공합니다. 이건 분명히 해 둘게요. 로그인한 페이지를 담는 건 특정 도구만의 능력이 아닙니다. html.to.design도 로그인이나 VPN 뒤 페이지용 확장을 내놓고 있고, 다른 곳들도 그렇습니다. 여기서 배타적 능력을 주장하는 페이지를 보면 직접 확인해 보세요.

도구마다 갈리는 건 담은 다음에 무슨 일이 일어나느냐입니다.

대신 물어야 할 질문: 담은 게 어디로 가나

브라우저가 페이지를 읽고 나면 그 데이터가 피그마까지 가야 합니다. 경로는 둘이고, 이 차이가 담는 단계보다 중요합니다.

서버를 거치는 경로. 확장이 캡처를 업로드하고 피그마 플러그인이 내려받습니다. 편하죠. 그리고 비공개 페이지의 내용이, 그러니까 텍스트와 고객 이름과 대시보드의 숫자들이, 내가 통제하지 않는 인프라를 지나간다는 뜻이기도 합니다. 이 방식의 도구들은 보통 로컬 파일 옵션도 같이 제공합니다. 캡처를 직접 내려받아 플러그인에 넘기는 방식이요. 다만 그게 기본값인 경우는 드물고, 존재를 알아야 고를 수 있습니다.

서버를 아예 거치지 않는 경로. 캡처가 클립보드나 디스크로 가고 피그마 플러그인이 거기서 읽습니다. 업로드할 데가 없으니 업로드되지 않습니다.

NDA가 걸린 페이지, 고객 데이터가 떠 있는 페이지, 규제 환경의 화면을 담는다면 보안 담당자가 신경 쓸 지점이 바로 이겁니다. "로그인 페이지가 되느냐"가 아니라, 이 부류는 다 되니까요. "내용이 기기를 떠나느냐, 그걸 확인할 수 있느냐"입니다.

주장을 믿는 대신 직접 확인하는 법

두 가지고 둘 다 금방입니다.

피그마 플러그인의 manifest 읽기

모든 피그마 플러그인은 manifest에 네트워크 접근을 선언하고 피그마가 그 선언을 강제합니다. 없다고 선언한 플러그인은 코드가 무엇을 시도하든 요청을 보낼 수 없어요. Snapture Import는 이렇게 선언합니다.

"networkAccess": { "allowedDomains": ["none"] }

누군가 지키겠다고 약속한 정책이 아니라, 플러그인이 가지고 있지 않은 능력입니다. 설치한 플러그인이라면 어떤 것이든 manifest를 읽어 볼 수 있습니다.

네트워크 탭 지켜보기

개발자도구를 열고 네트워크로 가서 캡처를 실행하세요. 확장이 보내는 요청이 보입니다. Snapture라면 페이지 자신의 이미지들이고, 유료 플랜이라면 라이선스 확인 하나가 더 있습니다. 페이지 내용을 업로드하는 도구라면 여기서 드러납니다.

무엇이 들어오고 무엇이 안 들어오나

렌더링된 페이지를 담으면 지금 보고 있는 상태가 그대로 옵니다. URL 방식으로는 공개 페이지에서도 닿을 수 없는 것들까지요.

• 열어 둔 메뉴, 모달, 팝오버가 열린 채로 들어옵니다. 다시 불러오는 게 아니라 지금 상태의 DOM을 읽으니까요.
• 로그인해야 존재하는 데이터가 진짜 텍스트로 옵니다. 표의 행, 차트의 값, 구석에 있는 내 이름까지요.
• 비밀번호 입력란은 도구가 담는 시점에 가려야 합니다. Snapture는 값을 점으로 바꾼 뒤에 기록해요. 뭔가 입력한 폼을 담기 전에 쓰려는 도구가 같은 일을 하는지 확인하세요.

어떤 도구에서도 레이어로 오지 않는 것들이 있습니다. WebGL 캔버스, 다른 출처의 iframe, 영상 프레임이요. 픽셀이 DOM으로 설명되지 않으니 무엇도 벡터로 바꿀 수 없습니다. 합리적인 동작은 회색 자리표시자 대신 딱 그 영역의 선명한 스크린샷을 넣는 것이고, Snapture는 그렇게 합니다.

사내 대시보드를 담는 실전 순서

1. 로그인하고 원하는 상태를 만듭니다. 담아야 할 패널이나 모달이 있으면 열어 두세요.
2. 맨 아래까지 한 번 스크롤했다가 올라옵니다. 대시보드는 행과 차트를 나중에 불러오는데, 렌더링되지 않은 건 담을 수 없습니다.
3. 페이지 전체를 담거나, 패널 하나만 필요하면 영역으로 드래그합니다.
4. 피그마에 붙여넣습니다. 폰트가 대체됐다면 그 페이지가 쓰던 폰트를 설치하고 다시 가져오세요. 대체된 폰트는 텍스트를 다시 측정하게 만들고 그 뒤가 전부 밀립니다.

대시보드가 아주 크다면 전체 대신 필요한 구역만 담으세요. 어떤 도구에나 예산이 있고, 원하는 부분만 영역으로 담는 게 중간에 한계에 걸린 전체 페이지보다 빠르고 정확합니다.

정리하면

URL 방식 변환기는 로그인 뒤를 볼 수 없고, 이건 누군가 메울 빈틈이 아니라 구조입니다. 브라우저 확장으로 담으면 해결되고, 이걸 제공하는 도구는 여럿 있습니다. 물어볼 값어치가 있는 건 로그인 페이지가 되느냐가 아니라 그 다음에 페이지 내용이 내 기기를 떠나느냐이고, 그건 1분이면 직접 확인할 수 있습니다.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia