디자인꿀팁

시작하는 말

누끼 따기 사이트를 찾고 계신가요? 굳이 포토샵과 같은 프로그램 구독이나 설치 없이도, 이미지를 드래그앤드롭만 하면 알아서 누끼를 따주는 무료 사이트가 있습니다. 오늘은 그 중 특별히 엄선한 3개의 사이트를 소개하고자 합니다.

물론 디자인을 전문적으로 하시는 분이라면 포토샵이라는 프로그램을 사용하여 이런 작업을 좀 더 정밀하고 손쉽게 할 수 있지만, 월 구독료를 내야한다는 아주 큰 장벽이 있지요. 오늘은 바로 이런 부담감이 있는 분들에게 좋은 정보가 될 것이라 생각합니다. 예시 이미지로는 활용도가 높으면서, 비교적 어려운 난이도에 속하는 "머리카락이 포함된 이미지"를 사용해보겠습니다. 

참고로 ’누끼’란 일본어로 ‘제거하다’라는 뜻을 가진 용어로 디자인 작업자들 사이에서는 오래 전부터 사용해 온 익숙한 용어이긴 하지만 일본어 잔재이기 때문에, 이제는 가급적이면 ‘배경 제거’라고 사용하는 것이 더 바람직하겠네요. 아래 글 내용부터는 배경제거라는 용어를 사용하도록 하겠습니다.

글의 순서

초간단 누끼 따기 사이트 추천 TOP 3

1. 리무브 bg (removebg)
2. 포토시저스 (photoscissors)
3. 픽슬러 (Pixlr)

1.리무브 bg (removebg)

배경제거 품질 : 상

무료로 다운받을 수 있는 최대 이미지 해상도 : 612 x 408 px

배경제거 이미지 사이트들 중 가장 유명하기도 하고, 무료임에도 성능이 우수합니다. 한글사이트도 있어서 사용이 편합니다. 이미지를 드래그앤드롭 하면 자동으로 배경제거를 해줍니다. 무료 이미지는 최대로 받을 수 있는 해상도가 612 x 408 px 이고, 원본 해상도의 사진을 원할 경우, 최초 가입하고 1회는 무료로 다운로드 가능합니다. 이후로는 유료서비스를 이용해야합니다.

흰 배경을 원하면 편집(Edit) > 색(Color) > 흰 배경의 이미지를 선택하면 됩니다. 물론 그 외에도 여러 배경을 선택할 수 있는 옵션들이 있습니다. 예시 사진을 보시면 머리카락 부분이 굉장히 자연스럽게 처리가 된 것을 볼 수 있습니다. 만약 손가락 부분의 지워진 부분을 살리고 싶다면 Edit > Restore 에서 붓으로 조금만 수정하면 됩니다. 만약 머리카락이 제대로 처리가 되지 않았다면, 이런 자체 편집 기능이 크게 도움이 되질 않았을텐데, 이 사이트는 다행히도 머리카락과 같은 세밀한 부분을 비교적 우수하게 잘 구분해냅니다.

2.포토시저스 (photoscissors)

배경제거 품질 : 중

무료로 다운받을 수 있는 최대 이미지 해상도 : 600 x 400 px

두 번째로 소개해드릴 사이트는 포토시저스입니다. 이미지를 업로드한 후 다운로드를 누르고, Download in Low Resolution을 선택하시면 됩니다. 무료 이미지는 최대로 받을 수 있는 해상도가 600 x 400 px 이고, 더 고해상도의 이미지를 원하면 유료서비스를 이용해야 합니다.

기본적으로는 투명한 배경 이미지인 png 파일로 받게 되고, 만약 배경을 흰 색으로 바꾸기 원하면,  Background > Mode 를 Transparent 가 아닌 Solid Color로 바꿔주면 되고, 다른 색상으로도 변경이 가능합니다. 예시이미지로 실제 테스트해보니, 리무브 bg보다는 정밀하지 못하지만, 아래 소개할 픽슬러보다는 우수하게 처리합니다. 다만 영어로 되어 있는 사이트라 영어에 익숙하지 않으시다면 사이트 이용이 좀 불편할 수 있습니다.

3.픽슬러 (Pixlr)

배경제거 품질 : 하

무료로 다운받을 수 있는 최대 이미지 해상도 : 3840 x 2560 px

이미지를 업로드하면, 바로 해상도를 선택하는 창이 나옵니다. 울트라 HD (3840 x 2560 px) , 풀 HD (1920 x 1280 px), 웹 (1280 x  853 px) 총 3가지 사이즈로 선택이 가능합니다. 픽슬러의 최대 장점은 무료임에도 불구하고 3840 x 2560 px 의 고해상도 이미지를 다운 받을 수 있다는 점입니다. 만약 배경과 피사체가 비교적 분리하기 쉬운 사진이라면, 위에 소개한 사이트들보다 월등히 뛰어난 장점이라고 볼 수 있습니다.

단점이라면 머리카락 분리가 리무브 bg 나 포토시저스에 비해 깔끔하게 되지는 않는다는 점입니다. 또한 사진 업로드시 종종 에러가 발생해서, 다시 업로드 해야하는 약간의 불편함이 있습니다. 또한 png 파일이기 때문에  만약 사용자가 투명한 배경이 필요한 경우면 다행이지만, 배경을 흰색으로 변경하고 싶다면, 사이트 자체에 그런 기능은 없다는 한계가 있습니다. 하지만 이런 한계점에도 불구하고 고해상도 이미지를 다운 받을 수 있다는 엄청난 장점이 있기에 강력 추천드리는 사이트입니다.

맺음말

지금까지 누구나 무료로 간편하게 배경 제거를 할 수 있는 사이트들을 소개해 드렸습니다. 이 외에도 수많은 이미지 배경제거 사이트들이 있지만, 회원가입을 유도한다던가, 유료로만 사용할 수 있다던가, 해상도 제한이 있다던가, 사진 업로드시 에러가 종종 발생하는 사이트들은 제외하였습니다.

머리카락이나 동물의 털과 같은 정밀한 작업이 필요한 경우가 아니라면, 정말 이보다 간편한 방법이 있을까 싶네요. 만약 이렇게 좀 더 심도 있는 작업이 필요하신 경우라면 제가 소개한 사이트에서 테스트해보시고, 만약 한계가 느껴지실 경우에는 포토샵을 구독하시길 추천드립니다. 물론 제가 추천드린 사이트에서도 유료 구매를 하면, 세밀한 편집이 가능한 경우도 있긴 하지만, 아무래도 포토샵이라는 좀 더 전문적이고 대중적인 프로그램을 사용하시는 것이 안정성 측면에서 좋기 때문입니다. 부족한 글 끝까지 읽어주셔서 감사합니다.

시작하는 말

오늘은 CSS를 공부하며 알게된 지식을 공유해볼까 합니다. 지금의 저처럼 코드를 이제 막 배우기 시작하셨다면, 마진과 패딩 때문에 한 번 쯤은 답답함을 느끼셨으리라 생각됩니다. 내가 설정하지도 않은 마진과 패딩을 어떻게든 내가 원하는 상태로 만들기 위해 요리조리 만지다보면, 도대체 어떻게 된 노릇인지 내가 원하는대로 바뀌질 않을 때가 있죠. 뭐가 문제였을까요?

바로 초기 설정 값이 있었기 때문인데요. 이건 CSS Box Model 이라고 구글에 검색해보면 여러 정보들이 나옵니다. 우리는 이론적인 얘기보다는 당장 사용할 수 있는 좀 더 실용적인 방법을 알아야겠죠? 우선 이 초기 설정된 마진과 패딩을 전부 "0"으로 만들고, 경계의 기준을 컨텐츠(텍스트나 이미지 등등)가 아닌 경계선(border)으로 바꾸면 되는데 이건 좀 어려운 얘기라 차차 설명드릴게요! 자 그럼 기초적인 코딩 공부 시작해볼까요?

본문

마진과 패딩 때문에 골머리를 앓다가 제 지인인 유능한 개발자분께 여쭤보니, 이런 코드를 하나 알려주셨네요. 이 코드는 별모양으로 시작하더라고요. 이 별모양(*)은 한국말로는 전체 선택자, 유니버설 셀렉터 Universal Selector 라는 녀석인데, 쉽게 말하면 문서 전체에 적용시킬 때 사용하는 선택자인가봅니다. (처음..써봤다는..)

See the Pen Untitled by JI WON YOO (@yoojiwon7) on CodePen.

코드를 보면 너무 간단하죠? .저도 처음 코드를 받았을 때, 사실 마진과 패딩을 모두 제로로 만들어버린다는 것까지는 쉽게 이해가 되더라고요. 그런데 마지막 코드는 좀 낯설어서 물어봤어요. 박스 사이징이.. 뭐죠? "CSS Box Model" 이라고 검색해보니 다음 그림과 같이 나오더라고요.

이 그림을 보면, 우리가 아무 것도 건드리지 않고 코드를 사용할 경우, 컨텐츠(텍스트 혹은 이미지)를 기준으로 패딩과 마진이 설정된다는 것을 알 수 있어요. 딱히 문제점이 안 느껴지시나요? 저도 처음에는 그렇게 생각했습니다. 하지만, 문제는 border값에 두께를 줄 때 생깁니다. 이게 우리 머리를 복잡하게 만드는 주요 원인이 되는 것이죠. 예를 들어 border 값을 100px 을 주면, 우리는 인지구조상, border의 외곽 라인을 박스 크기로 인식하게 되는데요. 즉, 100px 바깥 외곽선까지를 박스의 가로(width)로 인지한다는 말입니다. 하지만 만약 figure1 처럼 생각할 경우, 그 border의 두께는 포함되지 않습니다. 이게 왜 문제가 되느냐? 만약 이 상태에서 우리가 코드를 입력해서 가로(width)나 세로(height)값을 우리가 원하는 값으로 지정할 때, 그 값이 같더라도 크기가 다르게 보이는 결과가 나오는 것입니다. 사실 오류는 아니고, 엄밀히 말하면, 인지상 차이가 나는 것이죠. 어쨌든 핵심은 아래 그림처럼 컨텐츠 뿐만 아니라 border까지 포함한 box가 width 와 height의 영향을 받게 만들어야 합니다.

이렇게 border 포함해 기준으로 삼으면, 선 두께를 주더라도 두께의 외곽선까지가 박스 사이즈이기 때문에, 박스 사이즈를 에측하기 수월해집니다. 바로 이렇게 만드는 코드가 저 마지막 줄인 box-sizing: border-box; 인 것입니다. 이제 어렵지 않죠?

맺음말

결국 처음 질문인 왜 border-box 라는 코드를 사용하는지에 대한 답은 "이렇게 바꾸는 것이 우리 인지상 편하기 때문" 입니다. 사실 코드 세 줄에 불과하지만, 이 코드 세 줄 덕에 저는 더이상 패딩과 마진을 붙잡고 씨름하지 않게 되어 얼마나 고맙던지요. 이 글을 끝까지 보신 여러분들도 부디 도움이 되셨으면 좋겠습니다. 그럼 저는 다음 포스팅을 기약하며 마무리하겠습니다!

저작권 걱정 없는 무료 이미지 사이트 정보를 찾고 계신가요? 디자인 관련 분야에서 일을 하다보면 종종 저작권 걱정 없이 무료로 사용할 수 있는 이미지를 찾게 되는데요. 특히 상업적인 용도로 사용해야 할 경우 저작권에 대해 정확히 파악하고 더욱 신중하게 접근해야 합니다. 다행히도 해외에는 상업용 이미지들을 무료로 제공하는 다양한 사이트들이 있습니다. 문제는 이런 종류의 사이트가 너무나 많다는 것인데요. 디자이너 입장에서 실제 실무에 유용한 사이트들을 선정했습니다.

각 사이트들이 각각 어떤 특징들이 있는지 자세히 알아보고, 타사이트들과는 차별되는 그 사이트만의 특징을 좀 더 집중적으로 언급하겠습니다. 자. 그럼 지금부터 저작권 없는 무료 이미지 사이트 TOP 5 를 소개합니다!

글의 순서

저작권 없는 무료 이미지 사이트 TOP 5

1. Pixabay
2. Pexels
3. Unsplash
4. Burst
5. Stocksnap

1. 픽사베이(Pixabay)

픽세베이를 먼저 언급하지 않을 수 없겠네요. 컨텐츠의 양이 엄청나게 방대합니다. 사진 뿐만 아니라 일러스트, 벡터, 비디오, 음악도 검색이 가능합니다. 다양한 컨텐츠와 방대한 데이터량이 다른 경쟁 이미지 사이트들과 다른 픽사베이만의 최대의 장점입니다. 한글로 검색이 가능하며, 출처를 따로 표시하지 않아도 되는 사이트라 많은 사람들이 이용하는 사이트이기도 하죠.

하지만 단점도 있습니다. 컨텐츠의 양이 많은 건 좋으나 이미지의 퀄리티가 들쭉날쭉하고, 특히 일러스트나 벡터의 퀄리티가 낮아 실제로 사용할 만한 것이 별로 없다는 것이 좀 아쉽습니다. 또한 검색어를 입력하면 사이트 제일 윗 부분에 유료 이미지 사이트인 istock 스폰서 광고가 뜹니다. 또한 고해상도 원본사이즈의 사진을 다운받으려면, 회원가입을 반드시 해야한다는 치명적인 단점이 있습니다. 다운로드를 계속 받다보면 중간중간 로봇이 아닌지 체크하는 불편한 과정이 있습니다.

사용팁

한글로도 물론 검색이 되지만, 한글과 영문은 검색량이 다를 수 있기에 영문으로도 꼭 검색해보는게 좋습니다.

로봇이 아닌지 체크하는 팝업창이 귀찮을 경우 회원가입을 하면 됩니다.

2. 펙셀스(Pexels)

픽사베이와는 달리 유료 스폰서광고가 없어서 비교적 사이트가 깔끔하다는 인상을 받습니다. 연관검색어 기능이 타사이트와 비교해 탁월하고 UI도 전체적으로  깔끔합니다. 사진을 클릭하여 하단에 있는 ‘세부 정보’를 보면, 라이센스나 다운로드수 등 사진에 대한 주요 정보들이 일목요연하고 알아보기 쉽게 제공되어 있어서, 타사이트에 비해 보기 수월합니다. 출처를 따로 표시를 할 필요가 없고, 사진 사이즈를 다양하게 설정하여 받을 수 있습니다. 심지어 픽사베이와는 달리 원본 사이즈를 받는 것에 대한 제한도 없습니다. 한글 검색이 가능하고, 심지어 국가설정을 손쉽게 변경할 수도 있습니다. 아무래도 한글사이트에서는 영문으로 검색시 영문의 연관검색어가 작동을 안하기 때문에, 국가설정을 미국으로 바꿔서 하면 이런 문제를 쉽게 해결할 수 있습니다. 사진 이외에 동영상 컨텐츠도 있습니다.

3. 언스플래쉬(Unsplash)

필터를 쓴 듯한 감성적인 느낌의 사진을 원한다면 언스플래쉬를 사용하시는게 좋습니다. 이미지의 양이 방대하며, 사진 퀄리티는 픽사베이보다 더 안정적으로 유지하고 있습니다. 무엇보다 일일 다운로드 수의 제한이 없다는 것이 큰 장점입니다. 실무에서는 사진을 다운 받아 편집하는 용도로 사용하기보다는, 사진을 다운받아 바로 사용해야 할 경우에 아주 유용합니다. 그 정도로 완성도가 높은 사진들이 많이 올라옵니다. 최근 국내에서도 인지도가 점점 올라가면서 각광을 받고 있는 사이트입니다. 단점이 있다면 아직 한글 지원이 되지 않기에, 영문으로 검색해야 합니다. 또한 검색시 무한스크롤이 되기 때문에, 만약 마음에 드는 사진이 있다면 스크롤 위치를 기억해야 한다는 단점이 있습니다. 물론 회원가입을 해서 찜해두면 이런 문제는  쉽게 해결됩니다.

4. 버스트(Burst)

온라인 쇼핑몰 구축 서비스인 쇼피파이(Shopify)에서 제공하는 무료 이미지 사이트입니다. 대기업이 지원하는 사이트답게 이미지의 퀄리티가 상당히 좋습니다. 별도의 회원가입을 안 해도 다운로드 가능합니다. 다른 사이트와 달리 사진 사이즈는 고화질과 저화질 딱 두 가지 옵션만 있습니다. 다른 컨텐츠는 없고 오직 사진만 있습니다. 검색시 언스플래쉬와 마찬가지로 무한스크롤이 적용됩니다.

5. 스톡스냅(Stocksnap)

지금까지 소개해드린 다른 사이트들에 비하면 이미지 양이 적고, 유료 스폰서 광고도 있어서 다소 아쉬운 점들이 있지만, 그래도 마지막에 꼭 한 번쯤은 들러서 검색해보시라는 의미에서 추천드립니다. 비교적 깔끔한 구성의 사이트이고 고화질의 이미지를 제공합니다. 다만, 한글 검색이 안 되고, 사진의 사이즈도 타 사이트와는 달리 다양한 선택권이 없고, 고화질 원본사진만 받게 됩니다. 페이지 위쪽 두 줄 정도는 사진 왼쪽 상단에 전부 별 표시가 되어 있는데, 이것은 다름 아닌 유료 사이트 셔터스탁의 스폰서 링크입니다. 또한 언스플래쉬나 버스트와 마찬가지로 검색시 무한 스크롤이 되어 색인이 어렵다는 단점이 있습니다.

맺음말

이번 포스팅에서는 저작권 걱정 없이 상업적으로 이용가능한 무료 이미지 사이트에 대해 알아보았습니다. 저작권 걱정 없는 사진들을 잘 활용하셔서 하시는 업무에 꼭 도움이 되시길 바랍니다. 제가 소개해드린 5가지 사이트들은 CC0 라이센스나 그와 비슷한 라이센스 조건을 갖췄기에, 출처 표시가 권장은 되지만, 의무 사항은 아닌 경우가 대부분입니다. 하지만 가급적이면 평소에 저작권에 대해 조금만 관심을 갖고, 개별적으로 다운로드 받은 사진들의 저작권 확인을 꼭 하시기를 당부드리며 글을 마치겠습니다. 감사합니다.