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

디자인

캡처와 동시에 이미지를 편집할 수 있는 ‘Xnapper’

 

화면 캡처는 스마트폰은 물론 노트북이나 PC로 업무를 할 때 생각보다 자주 사용하는 기능입니다. 참고 자료로 활용하거나, 나중에 다시 보기 위해 남겨두기도 합니다. 그래서 캡처를 더 편리하게 도와주는 서비스, 캡처 후 태그 등을 붙여 관리하는 서비스, 캡처된 이미지를 편집할 수 있는 서비스 등을 다양하게 만나볼 수 있습니다.

 

그중에서도 오늘은 캡처와 동시에 이미지를 편집할 수 있는 서비스를 소개하고자 합니다. 캡처한 이미지를 바로 꾸며야 하거나, 다른 디자인 툴을 사용하는 것보다 빠른 작업이 필요하다면 유용하게 사용할 수 있는 ‘Xnapper’입니다. (※아쉽게도 현재 Mac OS, iOS 전용으로 안드로이드, 윈도우 환경에서는 사용이 어렵습니다.) 

 

캡처와 편집을 동시에 진행할 수 있는 서비스

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

‘Xnapper’는 크롬 확장 프로그램이 아닌 별도 설치 프로그램으로 제공됩니다. 위 이미지는 ‘Xnapper’를 실행한 후 특정 웹화면을 캡처, 편집 화면으로 바로 이동한 모습입니다. 편집 도구는 아래에서 더 자세히 설명하겠지만, 기본적으로 여백, 이미지 배경, 전체 배경, 사이즈, 민감한 정보 가리기 등의 기능을 담고 있습니다. 캡처 후 저장, 저장한 이미지를 다시 불러와 편집하는 과정보다, 캡처 후 명확한 사용 목적을 갖고 바로 편집할 수 있어 더 간편하게 느껴집니다.

 

<출처: xnapper>

 

위 이미지는 자주 사용하게 될 편집 도구입니다. ① 가장 먼저 사용할 수 있는 도구는 여백 설정입니다. 캡처한 이미지와 배경 영역 사이의 여백을 세세하게 설정할 수 있습니다. 이미지와 배경 사이의 여백이 많을 경우 정작 캡처한 이미지가 잘 보이지 않을 가능성이 있어, 세부적인 편집 전 먼저 설정해주는 것이 좋습니다. ② 이어서 캡처한 이미지가 포함된 영역의 배경설정과 사이즈를 설정할 수 있습니다. ‘Xnapper’에서 설정할 수 있는 배경은 크게 두 가지로 하나는 전체 배경이며, 또 하나는 이미지가 포함된 영역입니다. 각각을 설정해 이미지를 더 돋보이게 편집할 수 있는 환경을 제공합니다.

 

③ 세 번째는 이미지의 둥글기 설정입니다. ‘0’으로 설정할 경우 각진 모습이 되며, 값을 높일수록 더 둥근 이미지를 적용할 수 있습니다. ④ 네 번째로 그림자를 적용할 수 있으며, 그림자는 캡처한 이미지에만 적용됩니다. ⑤ 다섯 번째로 앞서 이미지가 포함된 영역의 배경을 설정할 수 있다고 이야기했는데, 이번에는 전체 배경을 변경하는 도구입니다. 기본 설정된 배경색을 선택할 수 있고, 직접 색을 선택해 구성하는 것도 가능합니다. 

 

⑥ 여섯 번째로 캡처한 이미지가 정방형이라 하더라도, 편집은 가로 비율을 넓게 작업하고 싶을 수 있는데, 이런 경우 유용하게 사용할 수 있는 크기 조절 기능이 있습니다. 자주 사용하는 비율이 포함되어 있으며, 선택과 동시에 반영됩니다. 배경 컬러와 같이 사이즈 역시 숫자를 입력해 적용할 수 있습니다. ⑦ 마지막 도구는 민감한 정보를 가리는 기능입니다. 예를 들어, 캡처한 이미지 속 이메일이 포함되어 있다면 설정한 컬러로 해당 영역을 가려줍니다.

 

도구를 하나씩 살펴봤으니 이제 각 편집 도구에서 설정할 수 있는 최소-최댓값을 적용했을 때, 어떤 결과가 있는지 살펴보겠습니다.

 

1) 여백

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

위 두 이미지 속 캡처된 화면은 사이즈가 모두 동일하지만, 왼쪽은 여백이 최대로, 오른쪽은 여백이 최소로 적용되어 있습니다. 여백에 따라 전혀 다른 모습이 된다는 것을 잘 보여주는데, 완성된 이미지를 어떻게 사용할 것인지에 따라 활용도는 달라질 수 있습니다. 왼쪽 이미지는 텍스트나 설명 등을 추가하기 쉽고, 오른쪽 이미지는 화면 자체에 집중할 수 있기 때문입니다.

 

2) 둥글기

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

둥글기는 캡처한 이미지에만 적용되며, 전혀 다른 분위기를 만들어낼 수 있습니다. 여백과 둥글기만 잘 활용해도 그럴듯하게 편집된 이미지를 만들 수 있고, 이와 더불어 결과물도 빠르게 확인할 수 있으니 편리합니다. 

 

3) 배경 컬러

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

이미지 자체의 편집이 끝났다면 배경 컬러를 적용할 수 있습니다. 배경 자체는 순서와 관련 없이 적용할 수 있지만, 이미지 편집 - 이미지가 포함된 영역의 배경 - 전체 배경 등의 순서로 도구가 배치되어 있는데요. 이 순서에 따라 사용하면 좋습니다. 전체 배경과 달리 이미지 배경은 단색으로 적용할 수 있으며, 원하는 컬러를 선택하면 적용된 모습을 바로 볼 수 있습니다. 배경 컬러와 대비되는 컬러를 사용해, 이미지를 강조하는 방법도 있으니 활용해 보시길 바랍니다.

 

 

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

또한 배경 컬러는 단색, 그라데이션, 이미지 배경 등 세 가지 중 선택이 가능하며, 8개의 기본 컬러 조합을 제공하고 있습니다. 같은 이미지도 배경에 따라 전혀 다른 결과물이 되기 때문에 이미지 배경과 함께 잘 섞어봐도 좋겠습니다.

 

4) 사이즈 설정

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

사이즈는 자주 사용하는 것을 기준으로 미리 설정된 값을 선택할 수도 있고, 직접 입력할 수도 있습니다. 좋았던 점은 트위터, 페이스북, 인스타그램, 링크드인, 핀터레스트 등에서 필요한 사이즈를 세부적으로 제공한다는 점입니다. 페이스북의 타임라인 이미지에 최적화된 사이즈, 인스타그래 스토리에 최적화된 사이즈 등을 제공하기에 목적에 따라 구체화된 사이즈를 선택할 수 있습니다.

 

 

한 번은 꼭 써봐야 하는 이유

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

‘Xnapper’는 iOS 사용자를 위한 별도 앱을 제공하는데, 맥 OS와 아이폰을 통해 동일한 경험을 얻을 수 있습니다. 이렇듯 캡처한 이미지를 발 빠르게 편집할 수 있는 환경을 제공한다는 점이 가장 큰 장점입니다. 다만 무료 버전과 유료 버전으로 나뉘어 있는데요. 무료에서는 워터마크가 자동으로 삽입되기도 합니다. 그래도 여러 편집 도구를 제공한다는 점을 생각하면 크게 불편하지 않은 수준입니다. 

 

이미지 캡처 서비스 Xnappeer
<출처: xnapper>

 

또한 서비스 업데이트도 꾸준합니다. 보통 이런 툴은 최초 버전을 공개한 뒤 유지만 하는 경우가 많은데요. ‘Xnapper’는 기능 단위 업데이트를 주기적으로 진행하고, 이에 대한 내용도 자세히 안내하고 있으니 더욱 신뢰하고 이용할 수 있습니다.

 

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

댓글 0

지금 써보러 갑니다

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

차트 생성 및 디자인 툴을 무료로 제공하는 ‘MagicPattern’

디자인

디자인 영감을 직관적으로 수집할 수 있는 'SAVEE'

디자인

몇 번의 클릭으로 디자인 패턴을 만드는 ‘more.graphics’

디자인

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

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

디자인

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

디자인

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

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, 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 이야기를 전달해드려요.

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