디자인꿀팁

시작하는 말

누끼 따기 사이트를 찾고 계신가요? 굳이 포토샵과 같은 프로그램 구독이나 설치 없이도, 이미지를 드래그앤드롭만 하면 알아서 누끼를 따주는 무료 사이트가 있습니다. 오늘은 그 중 특별히 엄선한 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 라는 코드를 사용하는지에 대한 답은 "이렇게 바꾸는 것이 우리 인지상 편하기 때문" 입니다. 사실 코드 세 줄에 불과하지만, 이 코드 세 줄 덕에 저는 더이상 패딩과 마진을 붙잡고 씨름하지 않게 되어 얼마나 고맙던지요. 이 글을 끝까지 보신 여러분들도 부디 도움이 되셨으면 좋겠습니다. 그럼 저는 다음 포스팅을 기약하며 마무리하겠습니다!

사람들이 기발하다고 느끼는 것은 응용력과 밀접한 관련이 있다.

기발하다고 하는 것은 문제해결 과정에 있어서,

외부의 지식을 잘 응용한 경우이거나,

기존의 방법과는 다르게 생각하는 것이고,

이는 지금 필요한 것이 무엇인지 그 본질을 빠르게 파악하고

다른 해결책은 없는지 생각하는 능력이 필요하다.

명확한 기준이 없어서이다.

의사 결정을 함에 있어서는 반드시 명확한 기준이 있어야 한다. 다만, 이것에 어떤 정답이 있는 것은 아니다.

즉, 나만의 철학과 신념으로 기준을 만들면 된다.

가령 책을 사놓고는 읽지 않는 책이 너무 많다고 가정해보자. 다음에 서점에 갔을 때, 과연 이 책을 내가 사야할 것인가 말아야할 것인가 고민하게 된다. 왜냐하면 내가 사놓고도 읽지 않았던 경험이 있기 때문이다. 지금 내가 고른 이 책은 읽을 수도 있지만, 안 읽을 수도 있다는 가능성이 존재한다. 그러면 나는 어떤 선택을 할 것인가.

간단하다. 일단 책을 사지 않는 것이다. 고민이 될 때는 판단을 잠시 유보하자. 내가 서점에 가는 행위 자체가 이미 허들이 높기 때문에, 나중에 시간이 좀 지나서 서점에 가서 구매를 하고 싶은지 나 스스로에게 물어보자.

개인적으로 나는 서점에 3번째로 갔을 때에도 그 책이 사고 싶으면 그 때서야 산다. 즉, 나에게 책을 구매하는 기준은 3번이나 그 책에 대한 필요와 욕구가 생길 때이다. 이 기준이 꼭 정답은 아니다. 누구에게다 적용되는 어떤 법칙과 같은 것도 아니다.

핵심은 ‘나만의 의사결정 기준을 만들자’는 것이다.