스샷한번 찍겠다고 개발자 괴롭히는 당신에게 이 팁을 바칩니다.

"저 개발자님, 이거 스샷 한번 찍어야 하는데 폰트가 너무 작은데요... 조금만 키워서 다시 배포해 주실 수 있을까요?

"저 개발자님, 이거 제 폰에서 보니까 여백이 서로 안맞는것 같은데요, 조금만 왼쪽으로 빼주세요... (5분 후) 개발자님 너무 왼쪽으로 치우쳐졌어요, 조금만 오른쪽으로... (5분 후) 아이고 개발자님, 진짜 마지막입니다. 조금만 왼쪽으로... (무한반복중... 개발자 빡쳐서 키보드 던짐)

혹시 당신이 디자이너, PM (Product Manager), 혹은 개발자와 일하는 기획자/마케터라면 저런 상황 한두번씩은 겪어 봤을 겁니다. 특히나 개발자가 귀한 스타트업에서 일하시는 분들이라면 개발자느님들에게 뭐 하나 부탁하는게 참 불편한 일인거... 모두 공감하실거라 생각합니다 ㅎㅎ

오늘은 그런 분들을 위해, 굳이 개발자님에게 구걸하지 않아도 디자이너가 (혹은 기획자가) 곧 출시할 제품이나 웹페이지의 스크린샷을 원하는대로 구성해서 스샷을 찍을 수 있는 아주 유용한 팁을 소개하고자 합니다.

본 팁은 다음 상황을 가정해서 구성되었습니다.

1. 웹사이트가 이미 출시되어 있고,
2. 피칭, 포트폴리오, 마케팅자료 등등에 넣을 스크린샷이 필요하며,
3. 아직 사이트의 세부적인 부분이 튜닝이 덜됐거나 유저가 없어서 사이트가 휑해보이는 상황

---

1. 우선 크롬의 "개발자도구"를 엽니다.

웹사이트에서 마우스 우측 버튼을 클릭해 보면 "Inspect"라는 버튼이 있습니다. (한글버전에서는 뭐라고 나와있는지 모르겠네요... 죄송합니다 ㅜ) 그러면 아래 그림과 같은 (비개발자들에게는) 무시무시해 보이는 탭이 하나 뜹니다. 쫄 필요 없이 제가 시키는대로만 하면 됩니다.

2. 탭의 좌측 상단의 Toggle Device Toolbar 버튼을 누릅니다.

그러면 디자이너(마케터) 들에게 아주 유용한 창이 하나 생기는데요, 바로 원하는 디바이스 뷰를 자유자재로 보여주는 기능입니다. 내가 iPhone 6 기준으로 반응형 뷰를 찍어야 하는 상황이면, 저기 디바이스에 iPhone 6를 선택해 주면 쓰샤샥~ 하고 반응형 뷰를 띄워주죠. 심지어 핸드폰 프레임을 씌울수도 있습니다.

3. 원하는 요소에 마우스를 놓고 우측버튼 클릭 > Inspect를 클릭해서 해당 요소를 찾습니다.

자, 가만보니 지금 저 로고 위쪽의 여백이 조금 좁아서 위쪽으로 좀 붙어보이는 감이 있어요. 스샷을 완벽히 찍기 위해 저 로고 위쪽으로 여백을 조금 줘 보겠습니다. 이렇게 해당 요소에 마우스를 놓고 Inspect 버튼을 클릭하면 해당 HTML 태그를 찾아줍니다.

4. element.style -> 여기에 원하는 CSS property를 입력해 주세요.

이렇게 말하면 벌써 여기서 창 꺼버리고 포기하는 코포자가 있을 수 있겠죠... ㅜㅜ 그런데 한번 시도해 보면 절대로 어렵지 않습니다. 다음 순서대로 입력하면 되요.

1. 우선 내가 올바른 HTML태그를 선택한건지 확인 (마우스를 왼쪽 코드에 대고 이리저리 움직여 보면 화면에서 블락이 깜빡거리면서 어디를 선택하고 있는지 보여줍니다.)
2. 우측 탭 상단의 element.style에 원하는 명령어를 입력합니다. 이 예제에서 하고 싶은건, 위쪽에 마진을 좀더 주고 싶은거기 때문에, margin-top: 50px;를 입력했죠.
3. 원하는 포지션이 나올때 까지 숫자를 세밀하게 조정합니다.

위 스타일 변경은 사실 CSS를 조금이라도 아는 분들은 쉽게 하실텐데요, 모르시는 분들을 위해 유용한 명령어 몇개를 알려드리면 다음과 같아요.

• margin-top: 위쪽 마진 변경 (ex_ margin-top: 50px -> 위쪽에 마진을 50px만큼 주기)
• margin-bottom: 아래쪽 마진 변경
• margin-left: 왼쪽 마진 변경
• margin-right: 오른쪽 마진 변경
• font-size: 폰트 크기 변경 (ex_ font-size: 20px -> 글자 크기를 20px로)
• letter-spacing: 폰트 자간 변경 (ex_ letter-spacing: 2px -> 글자 자간을 2px 만큼 벌리기)
• line-height: 줄간격 변경 (위에껀 모두 단위가 px로 하면 되는데 이거는 그냥 1, 1.1, 1.5 이런식으로 숫자만 써야 합니다. ex_ line-height: 1.5 -> 줄간격을 1.5만큼 조정)

사실 이거 말고도 엄청나게 많고, CSS 좀 만질 줄 알면 할 수 있는게 아주 무궁무진합니다. 기회가 되면 한번 공부해 보세요.

5. 제품 스샷을 찍어야 하는데 아직 사용자가 적어서 너무 초라해 보인다면??

혹시 방금 출시한 제품을 뭔가 있어보이게 포트폴리오로 만들어야 하거나, 페북 광고용 이미지를 만들어야 하는데 아직 사용자가 적은 상태라서 너무 초라해 보일때가 많이 있죠. 그렇다고 스샷한번 찍겠다고 허위 사용자를 마구마구 찍어낼 수도 없고... 이런 난감한 상황에서 아주 유용한 팁입니다. 이번 예제에서는 제가 런칭한 스팀헌트의 Today에 피처된 제품수와 보팅 금액 등을 있어보이게 바꿔보겠습니다.

1. 아까처럼 바꾸고 싶은 숫자 (문구 등등 바꾸고 싶은 텍스트 모두 가능합니다)에서 마우스 우측클릭 > 개발자도구 (Inspect)를 엽니다.
2. 그러면 좌측탭에 해당 HTML태그로 안내하는데요, 거기서 제가 바꾸고자 하는 37 products를 찾아 더블클릭을 합니다. 그러면 이 숫자를 바꿀 수 있어요. 이걸 있어보이게 137 products로 바꿔버립니다. ㅎㅎㅎ
3. 마찬가지로 $52.63 리워드도 있어보이게 $1052.63으로 바꿀 수 있어요.

(어디까지나 스샷용을 위한겁니다. 누구 속이려고 하진 마세요 ㅎㅎㅎ 가끔 이걸 활용해서 본인 코인 수익 인증샷을 허위로 만들어서 자랑질 하는 사람들도 있다는..;;;;)

이렇게 크롬 개발자도구를 이용하면 굳이 개발자에게 애걸복걸하지 않고 이렇게 원하는 모양으로 마음것 스샷을 찍어서 포트폴리오를 만드는게 가능합니다. 이 글에서는 다 보여드리진 못하지만 배경색깔, 이미지 다른거 얹혀보기, 더미 데이터 입력, 업보팅 안누른걸 누른걸로 변경... 등등 거의 모든걸 다 변경해서 스샷을 찍을수가 있답니다.

간접광고 주의보!!
광고가 끔찍히 싫으신 분들은 여기서 창을 닫아주세요!!!
😂😂😂

---

몇일전 런칭한 스팀헌트 (Steemhunt)는 제법 괜찮은 초기 반응을 보이고 있습니다. 런칭 첫날에는 14개 제품이 피쳐되고 총 보상이 약 $60 이상 찍혔고요, 둘째날은 30개 제품에 보상은 약 $45, 어제는 37개 제품에 약 $50정도 찍혔습니다.

아직 극 초기단계라서 글 보상이 그리 크진 않아보일수도 있지만, 본인이 올린 제품이 top10에 들어가기만 하면 글보상이 적어도 3-4불 이상은 찍히는 편입니다. 저희가 계속 마케팅을 통해서 헌터 뿐 아니 투표에 참여하는 유저들도 꾸준히 모집할 예정이니 많은 관심 부탁드립니다^^

스팀헌트가 궁금하신 분들은 다음 소개글을 참고해 주세요 :)

• 영어가 편한 분: Introducing Steemhunt: Daily ranking of effortlessly cool products fueled by STEEM blockchain
• 한글이 편한 분: 작가놀이가 살짝 지겨워진 그대?? 스팀헌트로 놀러오시죵
• Telegram Chat: https://t.me/joinchat/AzcqGxCV1FZ8lJHVgHOgGQ