스크린샷을 브라우저 및 기기 목업으로 표현하기

스크린샷 준비하기

가장 깨끗한 캡처로 시작하세요. 배치하기 전에 임시 알림, 개인정보와 우연히 표시된 상태 정보를 제거하세요. 프레임이나 원근 효과가 읽을 수 있는 영역을 줄일 수 있으므로 중요한 인터페이스는 중앙 가까이에 두세요. 작업 흐름을 보여 준다면 결정적인 화면 하나를 고르거나 같은 자르기 규칙을 사용하는 작은 시리즈를 만드세요.

내용이 웹페이지나 데스크톱과 비슷한 화면이면 브라우저 스타일을 사용하세요. 터치 레이아웃과 세로 읽기가 중요하면 휴대폰 또는 태블릿 스타일을 사용하세요. 이 프레임들은 장식용이며 브라우저를 열거나 URL을 불러오거나 스크린샷 자체를 바꾸지 않습니다. 이러한 차이를 알면 완성 이미지에 대해 정직한 기대를 설정할 수 있습니다.

1. 주제가 분명한 스크린샷 하나를 고르고 민감한 내용을 제거하세요.
2. 브라우저, iPhone 또는 iPad 프레임 중 어떤 것이 맥락을 가장 잘 설명하는지 결정하세요.
3. 중요한 텍스트와 컨트롤이 프레임 안에서 계속 보이는지 확인하세요.

프레임을 배치하고 장면을 선택하기

스크린샷을 돋보이게 하는 배경을 선택하세요. 차분한 단색은 문서화에 적합하고, 부드러운 사진이나 자연 장면은 제품 프레젠테이션을 더 따뜻하게 만들 수 있습니다. 프레임의 가장자리가 보일 만큼 주변에 충분한 공간을 두고 목업을 배치하세요. 브라우저 창에서는 장식용 컨트롤이 페이지와 경쟁하지 않도록 브라우저 크롬은 알아볼 수 있게 유지하세요.

원근을 자연스럽게 유지하세요. 약간의 기울기는 에너지를 더하지만 과도한 회전은 작은 텍스트를 읽기 어렵게 합니다. 목업을 배경의 시각적 방향에 맞추세요. 열린 공간 쪽으로 기운 프레임은 의도적으로 보이지만 복잡한 물체를 향하는 프레임은 답답해 보입니다.

다음 읽기: 스크린샷에 iPhone 프레임 추가하기

1. 충분한 대비가 있는 단순한 배경이나 직접 만든 이미지를 고르세요.
2. 장식용 프레임을 배치하고 바깥 가장자리 주변에 여백을 두세요.
3. 먼저 곧은 버전을 시도한 뒤 최종 공유 크기에서 기울기를 비교하세요.

가독성과 신뢰성 확인하기

축소해서 시청자가 무엇을 가장 먼저 보는지 물어보세요. 스크린샷이 주제가 되어야 하고 프레임은 어떤 종류의 화면인지 알려 주는 역할을 해야 합니다. 배경이 앞서 나가면 단순하게 만들거나 대비를 줄이세요. 스크린샷이 사라지면 목업을 키우거나 더 차분한 장면을 사용하세요.

모서리, 텍스트와 가장자리를 확인하세요. 프레임을 너무 바짝 자르면 우연한 것처럼 보일 수 있고, 좁고 고르지 않은 배경 띠는 의도적인 자르기보다 더 거슬릴 수 있습니다. 가능하면 스크린샷의 원래 비율을 유지하고 원형 아이콘이나 사진 속 인물을 늘리지 마세요.

프레임 스타일과 Pro 조건은 앱 버전마다 바뀔 수 있으므로 시리즈를 계획하기 전에 앱의 현재 Mockups 패널을 확인하세요.

1. 계층 구조를 검토한 다음 텍스트와 프레임 가장자리를 확인하세요.
2. 전체 크기와 게시물 또는 기사에 사용될 크기에서 결과를 비교하세요.
3. 시청자에게 맥락이 필요하면 스크린샷 바깥에 짧은 설명을 추가하세요.

일반적인 목업 문제 해결하기

스크린샷이 늘어나 보이면 원래 비율로 다시 가져와 맞추세요. 텍스트가 너무 작으면 중요한 영역을 기준으로 자르거나 더 큰 프레임을 사용하세요. 프레임과 배경의 색이 비슷하면 다른 배경이나 더 절제된 프레임으로 분리감을 만드세요. 이미지가 이유 없이 기울어 보이면 곧은 정렬로 돌아가세요.

직접 만든 이미지 배경이 복잡하면 무거운 장식으로 스크린샷을 가리지 마세요. 목업을 더 차분한 영역으로 옮기고 시각적 경쟁을 줄이거나 더 단순한 색을 선택하세요. 테스트로 내보낸 뒤 고객에게 보내거나 게시하기 전에 실제 저장 결과를 확인하세요.

1. 크기를 바꾸기 전에 가로세로 비율을 바로잡으세요.
2. 장식을 추가하기 전에 자르기와 계층 구조로 가독성을 해결하세요.
3. 저장된 이미지를 실제 목적지 크기에서 한 번 미리 보세요.