플러터(flutter) 배포용 스크린샷 목업 간단하게 뽑아내기

초기 발행 : 2021년 6월

실습 환경 : 맥북 / BigSur / M1

 

앱 개발을 완료한 뒤, 배포하는 과정에서 스크린샷을 뽑아내게 되는데

이때 저는 크게 세 가지 방법을 써요.

1. 첫 번째는 앱 내부에 보여주는 디바이스 내용물의 스크린샷을 찍은 뒤에 포토샵 목업또는 기타 목업 이미지를 이용하는 것.


휴대폰의 각도도 바꿀 수 있고, 손으로 쥐고 있는 모양 등을 자유롭게 만들어 낼 수가 있어서 좋은데

약간 더 귀찮은 과정을 거쳐야 하고, 원하는 디바이스 모양의 목업이 없다면 할 수가 없다는 점이 있어요.

대략 이런 모양이죠 제가 한 건 아니고 퍼온 거에요.

 

 

포토샵이 깔려있고, 활용할 줄 안다면 제일 좋은 방법이겠죠.

2. 두 번째는 무료 목업 사이트를 이용하는건데  두가지 사이트를 소개해드릴게요.

 

(1)

https://mockdrop.io/

MockDrop

목업드롭 이라는 사이트인데, 쓰기 간편해요.

그냥 스샷 집어서 끌면 아래와 같이 목업이 돼요. 앞선 포토샵 이용하는 거랑 비슷한 모양일 낼 수가 있지만

포토샵보다는 조금 퀄이 떨어져요. 그리고 종류도 많이 없구요.

 

(2)

https://www.mockmagic.com

Mock Magic

이 목업 사이트는 진짜 간단한 정면 화면을 제공해줘요. 간단하게 디바이스 선택하고 스크린샷 넣은뒤

다운로드하면 png으로 받아져요. 

 

 

3. 세번째는  디바이스 자체를 배젤 포함하여 찍어서 스스로 만들어내는 거예요.

이거 같은 경우 디자인에 크게 신경 쓰지 않고 빠르게 뽑아낼 때 좋고, 원하는 디바이스는 뭐든지 할 수가 있다는 장점이 있어요.

근데 좀 더 정확히 말하면 아이폰 같은 경우는 전부다 되고, 안드로이드 갤럭시 같은 거는 갤럭시 공식 홈페이지 같은 데서 

 

프레임 파일을 받아야 할 거예요.

command + shift + 4 를 눌러주세요. 맥북에서 스샷 찍을때 쓰는 단축키죠.(맥북 이외의 컴퓨터는 잘 모르겠어요..)

그리고 spacebar 를 눌러주세요. 그 뒤 시뮬레이터를 선택하면 이렇게 png으로 뽑아낼 수 있어요.

근데 상단의 라벨은 없앨 수가 없더라고요. 그래서 라벨을 잘라줘야 하는데, 라벨을 자르게 되면 그림자 때문에 좀 이상하게 보여요.

그래서 그림자를 없애 줘야 하는데,

 

터미널에 

 

defaults write com.apple.screencapture disable-shadow -bool TRUE 

 

라고 쳐주시면 스샷을 뽑을때 그림자 없이 뽑을 수 있어요.

(왼쪽)그림자 있음, (오른쪽)그림자 없음

 

이렇게 그림자 없이 뽑았으면 포토샵을 이용하든 ppt를 이용하던 잘라내서 사용하면 돼요.

저 같은 경우는 구글 프레젠테이션을 주로 써요.

이렇게 하면 이차원 각도 정도는 바꿔줄 수가 있어요.

대충 단시간에 대략적으로 만들어 낼 때 좋죠.

 

그럼 배포 잘하세요~

 

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com