크롬 브라우저로 업무시간에 온라인쇼핑 대놓고 하는법
문돌이의 得tem 시리즈
"득템 (得tem)" 이란 나무위키님에 의하면 어떤 형태로든지 통상적인 수준보다 좋은 아이템을 입수한 상황을 뜻하는 게임 용어를 말한다. 오늘부터 "문돌이의 得tem 시리즈"라는 새로운 매거진을 연재하려고 한다. 개발자들에게 천대받고, 디자이너들에게 무시받으며 꾸역꾸역 "기획자"로서 삶을 사는 많은 문돌이들에게 유용할 만한 팁들을 하나씩 소개할 예정이다.
특히, 개발자나 디자이너들에게 통상적인 스킬이 우리 문돌이들에게 탑재되면 그들보다 배 이상의 활용력을 발휘할 수 있는게 또한 우리 문돌이들이 아니겠는가. 그래서 그간 문돌이로서 필자가 나름 5년간 개발계+디자인계에서 빌붙어먹으면서 배운 소소한 스킬들을 풀어보고자 이 키보드를 툭탁거리고 있다.
개발계에서 일상적으로 활용하는 "개발자툴"만 틀어놔도 당신은 업무 시간에 온라인 쇼핑을 대놓고 할 수 있다는 사실을 알고 있는가?
필자는 아일랜드의 어느 중소도시의 코워킹 스페이스에서 일하고 있다. 내 바로 앞앞 자리에는 문돌이 보스 1명과 그밑에 일하는 개발자 2명이 한 팀인 회사가 일하고 있어서, 내 자리에서 그들 스크린이 훤하게 보이는 자리에 있다.
그 개발자 1명이랑 좀 친해서 자리를 자주 들락날락 거리곤 하는데, 어느날 그놈 자리에 놀러갔는데 다음주에 여자친구 기념일날 줄 선물을 신나게 고르고 있더라. 그래서 "너 이렇게 업무중에 쇼핑 쳐 하고 앉아 있어도 저 문돌이가 뭐라고 안함?" 하고 물었더니, 이런 말을 하는거다.
아, 괜찮아. 걍 크롬 개발자툴 켜놓고 쇼핑하고 있으면 쟤는 내가 쇼핑하고 있는지도 몰라 ㅋㅋ
다음과 같은 순서로 이 꿀팁을 시전하면 된다.
1. 너가 가는 쇼핑몰 사이트를 크롬 브라우저로 접속한다. 나는 쿠팡 매니아기 때문에 쿠팡을 들어가 보겠다.
아니 쿠팡캐시가 또 저렇게 줄어들어있다니 아무래도 쿠팡에서 소소하게 사기치는게 아닐까... 하는 또 문돌이 스러운 생각을 하면서 쿠팡을 킨다.2. 사이트 아무대서나 마우스 오른쪽 버튼을 클릭하면 Inspect 라는 메뉴가 있는데, 그게 바로 그 유명한 크롬 개발자툴이란거다.
3. 저건 개발자들이 사이트 소스 보고, 스크립트 실험해 보거나 디버깅등등 할때 쓰는 툴인건데, 보시다시피 화면의 대부분을 우리같은 문돌이들은 알 수 없는 외계어로 멋나게 치장되어 있다.
4. 혹시 위 사진처럼 화면이 꽉차게 안보이고 잘려서 보이는 사람이면, "Toggle device toolbar" 버튼이 꺼져 있어서 그럴거다. 화면 중간 윗 부분에 아래처럼 생긴 버튼이 있는데, 그걸 눌러주면 인터넷 뷰가 꽉 차서 나온다.
저렇게 개발자 툴 하나만 띄워놓고 걍 왼쪽 창에서 신나게 온라인 쇼핑 하는게 이 팁의 전부다. 혹시 보스가 지나가다 "너 지금 뭐하는거냐?" 하고 물어보면, 지금 기획중인 건이 있는데 사이트 인터페이스 뜯어보면서 벤치마킹하는 중이다... 던지, 페이먼트 관련 프로세스 파는중이다... 등등 있어빌리티 있는 단어를 온갖 동원하면서 계속 쇼핑을 하자.
이 툴의 좋은점은 내가 왼쪽에서 쇼핑을 하고 있다가 보스가 지나갈때 걍 오른쪽에서 마우스를 계속 왔다갔다 하면 왼쪽의 뷰 창에서 계속 뭔가 깜빡 깜빡 거리면서 "아 이새끼가 뭔가 저 사이트를 뜯어보는 중인가보다" 하는 느낌을 준다.
쇼핑을 신나게 하다가 이렇게 오른쪽에 마우스를 깔짝깔짝대면 왼쪽 뷰가 막 반짝반짝 거린다.혹시라도 개발자도구를 켰는데 개발창이 별도로 뜨면서 화면을 잡아먹는 경우, 당황하지말고 개발자 탭의 맨 우측 상단에 보면 쩜 3개 아이콘이 있는데 그걸 클릭해 보면 Dock Side를 별도로 빼거나 왼쪽, 아래, 오른쪽으로 붙이는 버튼이 있다. 그걸 오른쪽으로 붙이면 된다.
이렇게 개발창이 툭 튀어나오면 당황하지 말고 Dock Side를 클릭해서 우측으로 붙여주자혹시 이걸로도 모자라서 더 큰 "위장"을 해야하는 문돌이 들이라면, 다음 방법도 있다. 이건 메뉴 찾는데 조금 헤맬 우려가 있으니 친절하게 동영상으로 설명해 보겠다.
1. 왼쪽 뷰 탭의 상단에 "Responsive" 라고 적힌 메뉴가 보일거다. 그걸 클릭하면 디바이스별로 뷰를 바꿀 수 있는 기능이 나온다.
2. 이걸 iPhone 6/7/8로 바꾼다 (그러면 창이 갑자기 모바일 사이즈로 줄어든다).
3. 리프레시를 한번 하면 (새로고침) 화면이 갑자기 모바일 버전으로 변경된다.
4. 가운데 위에 쩜쩜이 버튼이 하나 있다 (왼쪽 뷰에서 우측 상단). 그걸 누르면 첫번째에 "Show device frame"이라는 메뉴가 있는데, 그걸 클릭하면 아주 멋들어진 아이폰 목업이 화면에 씌워진다.
5. 이 상태에서 신나게 온라인 쇼핑을 시전하면서 보스가 지나가면 "모바일 버전 인터페이스 기획 벤치마킹 중입니다" 하고 답하면 된다.
데탑 뷰를 아예 모바일로 바꿔서 마치 모바일 버전 인터페이스 공부중이라는 x소리를 시전하면 된다.사실 이 크롬 개발자툴은 저런거 하라고 쓰는 도구는 아니고, 내가 곧 연재할 시리즈들에서 자주 다뤄질, 당신의 개발력+디자인력을 득템하는데 중요한 도구가 될 예정이라 첫 시리즈에서 좀 재미난 컨셉으로 다뤄봤다. 필자가 너무 바쁜척만하지 않는다면 적어도 일주일에 한개 정도는 소중한 스킬을 소개해서 당신의 문돌이 라이프 업그레이드에 1이라도 도움이 될까 하오니 모두들 소중한 좋아요 + 댓글 + 구독하기로 응원 부탁드린다.
글쓴이는 노마드태스크 (Nomadtask)라는 퀘스트 기반의 글로벌 마케팅 캠페인 플랫폼의 Co-founder 및 디자이너로 일하고 있다. 원래는 비즈니스를 전공하고 기획자로 일하다가 스타트업을 창업하고 본업을 스타트업 파운더+디자이너로 전향했는데, 그 과정에서 득템한 다양한 스킬들을 연재하고 있다.
노마드태스크 - https://nomadtask.com/
