다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

 

사용자의 60% 정도가 처음 2개의 스크린샷을 확대하거나 자세히 살펴보지 않습니다. 바꿔 말하면 첫 번째와 두 번째 스크린샷으로 시선을 사로잡지 못하면 이후 스크린샷은 사용자에게 도달하지 못할 가능성이 높습니다. 그래서 최근 앱에서는 초반에 사용자의 시선을 사로잡기 위해 파노라마 스크린샷을 보여주거나 가로형 그래픽을 활용하는 일이 많습니다. 첫 스크린샷을 영상으로 보여주는 노력은 모두 상세페이지 진입 후 설치 전환을 높이기 위한 노력이라고 볼 수 있습니다. 오늘은 이처럼 앱 다운로드에 중요한 역할을 하는 스크린샷을 별도의 툴을 활용하지 않고 빠르게 제작할 수 있는 웹 서비스를 소개해 보겠습니다.

 

누구나 쉽게, 원하는 스크린샷을 제작할 수 있다면?

오늘 소개할 서비스는 ‘PWA Screenshots Generator’입니다. 7개 스크린샷을 기준으로(더하거나 빼는 것도 가능) 다양한 레이아웃과 목업, 그리고 텍스트와 컬러 등의 편집 도구를 활용해 화면을 벗어나지 않고 스크린샷을 제작할 수 있도록 도와줍니다.

 

스크린샷 제작
<출처: PWA Screenshots Generator>

 

기본 편집 화면의 모습입니다. 상단에는 컬러나 레이아웃, 적용할 폰트 종류와 사이즈, 텍스트 정렬과 디바이스 등을 선택할 수 있는 도구가 자리 잡고 있습니다. 그리고 아래로는 개별 이미지를 확인할 수 있으며, 이 이미지를 하나씩 편집해 우리 서비스만의 스크린샷을 제작할 수 있습니다. 상단 도구 모음의 역할은 전반적인 룩을 편집할 수 있으며, 하단 개별 스크린샷은 설정한 룩에 따라 이미지와 텍스트 중심의 내용 정리에 초점이 맞춰져 있는 모습입니다.

 

기본 편집 화면
<출처: PWA Screenshots Generator>

 

상단 도구 모음을 조금 더 자세히 살펴보겠습니다. ① 가장 먼저 활용할 수 있는 도구는 레이아웃입니다. 직접 디자인을 하게 될 경우 이런 레이아웃, 여백, 텍스트나 이미지의 배치 등을 고민하는데 많은 시간을 투자해야 하기에 더 반가운 기능입니다. 첫 번째, 두 번째 스크린샷에서 이어지는 레이아웃을 활용할 수 있으며, 다양한 레이아웃이 제공되기에 이후 이미지를 고려해 적절한 대상을 선택 후 편집할 수 있습니다.

 

② 전체 스크린샷의 컬러도 일괄 변경 및 적용 가능합니다. 두 가지 컬러를 선택해 조합할 수 있는 그라데이션은 물론, 단색 컬러를 적용할 수 있는 옵션도 포함되어 있습니다. 자주 쓰이는 기본 컬러 조합을 제공하기 때문에 선택이 어렵게 느껴질 경우 유용하게 활용할 수 있습니다. 아직 이미지를 삽입하기 전이라면, 개별 이미지를 편집한 뒤 어울리는 컬러를 선택하는 것도 방법입니다.

 

컬러 설정 변경
<출처: PWA Screenshots Generator>

 

③ 이어서 스크린샷에 포함되는 텍스트를 어떤 위치에 배치할 것인지, 왼쪽/중앙/오른쪽 세 가지 중 하나를 선택할 수 있습니다. 레이아웃에 따라 이미지 위치가 달라질 수 있기에 보통 텍스트는 정렬 기능을 자주 사용하게 됩니다. ④ 텍스트 컬러를 변경할 수 있는 기능도 있습니다. 앞서 선택한 배경 컬러에 따라 텍스트 컬러가 잘 보이거나 보이지 않을 수 있기에 함께 사용하기 좋습니다.

 

⑤ 폰트 사이즈 변경도 가능하고 ⑥ 영문 기준이지만 다채로운 폰트가 적용되어 있어 입맛에 따라 선택 및 활용이 가능합니다. ⑦ 목업(디바이스) 종류도 선택할 수 있는데, 아이폰 14, 갤럭시 S22 등 최신 기종이 포함된 모습이 눈에 띕니다. 개인적으로 나중에는 폴드나 플립 등의 기기도 포함되면 좋겠습니다. ⑧ 스크린샷 구성을 가로 형태로 변경하고 싶다면 직접 사이즈를 변경할 수 있으며, ⑨ 최초 7개 제공되는 스크린샷 구성을 1개 단위로 추가할 수도 있습니다.

 

폰트사이즈 변경
<출처: PWA Screenshots Generator>

 

이번에는 개별 이미지(스크린샷) 편집 도구를 살펴보겠습니다. 컬러나 폰트 종류 및 사이즈 등은 일괄 적용이 가능하지만, 스크린샷 단위로 이미지와 내용, 위치 등을 별도로 편집할 수 있습니다. ① 많이 사용하는 기능은 타이틀, 설명, 이미지 업로드 등의 기본 편집 기능입니다. 여기서 눈에 띄는 기능은 URL를 입력해 화면 전체를 가져올 수 있다는 점입니다. 이미지를 직접 캡처하지 않아도 되기에 꽤 유용하게 사용할 수 있는 기능 중 하나입니다.

 

② 레이아웃을 변경할 수 있다 하더라도 그 안에서 구성요소의 위치 등을 변경하고 싶은 경우가 종종 발생합니다. 이런 상황에서 잘 활용할 수 있는 도구로 스크린샷 속 이미지를 기준으로 사이즈나 위치를 쉽게 변경할 수 있습니다. 앞서 이미지 대신 URL을 입력했다면 스크롤을 적용해 불러온 웹페이지 중 원하는 지점을 지정할 수도 있습니다.

 

요즘it 스크린샷 레이아웃
<출처: PWA Screenshots Generator>

 

원하는 텍스트를 삽입하고, URL을 통해 이미지를 등록한 모습입니다. 같은 내용을 등록하더라도 이렇듯 레이아웃이나 위치 변경에 따라 다양한 모습을 연출할 수 있습니다. 물론 우리가 자주 사용하는 피그마 등 디자인 툴로도 작업할 수 있는 내용이지만, 기본적인 편집 도구를 대부분 지원하고 저장할 수 있기에 상대적으로 적은 노력과 시간으로 여러 결과물을 볼 수 있다는 점이 매력적입니다.

 

요즘it 스크린샷 컬러 설정
<출처: PWA Screenshots Generator>

 

이번에는 배경 컬러와 디바이스를 각각 구글 픽셀과 갤럭시 S22로 변경한 모습입니다. 앞서 살펴본 스크린샷과 또 다른 분위기를 느낄 수 있습니다. 디자인 작업을 잘하지 못하는 저도 클릭 몇 번으로 이렇게 그럴듯한 모습을 확인할 수 있어 더 유용하게 다가옵니다. 이렇게 작업한 스크린샷은 일괄 다운로드가 가능하며, 하나씩 내려받는 기능도 지원합니다. 회원가입이나 로그인, 결제 등도 필요 없습니다.

 

 

한 번은 꼭 써봐야 하는 이유

요즘it 스크린샷
<출처: PWA Screenshots Generator>

 

얼마 전에도 구글 플레이 스토어와 앱스토어를 기준으로 ‘스토어 등록정보 실험'을 진행했습니다. 물론 디자이너와 함께 작업을 진행했고, 이를 위한 별도의 문서 등을 작업하기도 했습니다. 아쉬웠던 점은 제가 생각한 문구 등과 이미지가 실제 어떤 모습으로 나올지 구체적으로 미리 살펴볼 기회가 부족했다는 점이었습니다.

 

오늘 소개한 툴을 위 상황에 대입해보면, 실제 사용할 수 있을지는 협의가 필요하지만 어떤 모습으로 구성하고 싶은지, 최대한 구체적이고 실제 모습에 가까운 스크린샷을 제작할 수 있는 기회를 가질 수 있습니다. 많은 시간을 필요로 하지 않으며, URL 등록 등 정말 다양한 기능을 지원한다는 점에서 앱 내 스크린샷 정비를 준비하는 분들이라면 한 번쯤 꼭 써보셨으면 하는 서비스 중 하나입니다.

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.