Bookmark (3)

반응형

 


 

[Visual Inspector] 디자이너를 위한 툴 비주얼 인스펙터 (Visual Inspector)


크롬을 쓰다보면 필요한 프로그램을 크롬에 직접 설치하여 쓰는 경우가 많은데,

이러한 확장 프로그램들을 쓰다보면 용량만 차지하고 쓰지는 않는 프로그램들이 있는 반면에,

편리하게 실무에서 자주 쓰게 되는 확장 프로그램들이 생기기 마련입니다.

 

비주얼 인스펙터 (Visual Inspector)가 바로 그런 프로그램인데요,
비주얼 인스펙터는 디자인 분석 툴로 웹 사이트에 적용된 위치, 불투명도, 색상, 그라디언트, 타이포 그래피 등의

구성요소를 빠르고 간편하게 확인할 수 있는 아주 편리한 툴입니다.

소개글로 디자이너가 디자인을 위해 제작되었다고 해도 과언이 아닌데요.

 

먼저 크롬에서 아래 URL로 접속하여 해당 확장 프로그램을 다운로드, 설치해줍니다.
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=ko

 

 

설치가 완료되면 우측에 하늘색 눈 모양의 작은 아이콘이 생기는데,
네이버로 들어가서 해당 창을 열어보도록 하겠습니다.

 

 

창을 열고 네이버 로고를 클릭하니, 해당 위치가 한 눈에 보기 쉽게 표시가 되는데요,
(창 외의 부분은 프로그램 내에서 어두워지는 게 아니라 보기 편하게끔 제가 임의로 처리하였습니다.)

 

 

 

 

이런 식으로 위치가 확인이 가능할 뿐만아니라 각 탭에서
해당 페이지에 대한 정보를 손 쉽게 확인할 수 있고 또 변형하는 것도 가능합니다.
(변형을 한다해서 해당 페이지에 실질적으로 영향을 주지는 않습니다.)

 

 

 

 

색상 코드 확인은 물론 폰트 관련 정보도 손쉽게 알 수 있어 페이지를 서치할 때 큰 도움이 됩니다.
또한 페이지에 쓰이고 있는 이미지도 Export 버튼으로 손쉽게 다운로드도 가능합니다.

반응형
반응형



[user agent switcher/Opera Mobile Emulator] 데스크탑에서 모바일화면보기


모바일용 페이지를 제작할 때는 모바일 내에서 구현이 되는지 핸드폰으로 확인하는 작업을 거칩니다.

그런데 핸드폰으로 확인하는 작업을 하자니, FTP로 해당 파일을 업로드해서 URL을 복사하고 

핸드폰으로 직접 확인하는게 손이 많이 가고 번거롭더라구요.


 데스크탑에서도 모바일 화면을 볼 수 있는 방법을 찾다보게 되었는데 의외로 많은 방법들이 있었습니다. 

그 중에서 써보니 가장 좋았고 지금도 쓰고 있는 것들을 소개하려 합니다.



1. 크롬 확장 프로그램 user-agent-switcher

(https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ko)



크롬을 쓰고 계시는 분들은 개발자도구에서 디바이스를 모바일 크기로 줄여 

확인하는 방법에 대해 알고 계시는 분들이 대부분일거라 생각하는데요. 


(모르시는 분들은 크롬에서 f12 누르시고 ctrl+shift+m을 누르시면 해당 페이지로 이동됩니다.)


저 같은 경우에는 웹용 페이지를 열었을 때, 모바일로 접속했을 시 

모바일 페이지로 전환되는 것까지 확인해야했기때문에 이 부분에서는 크게 도움이 되지 않았습니다. 


그래서 크롬 확장프로그램을 다운받게 되었는데요. 


크롬에서 위 URL로 접속하면 설치화면이 뜨게 됩니다. 

설치를 마치면 URL 바로 옆에 선글라스를 낀 아이콘이 생성이 되는데요. 

아이콘을 누르면 다양한 디바이스로 이동할 수 있는 메뉴들이 나옵니다.


 iOS > iphone6 를 누르시거나 Android > Android KitKat을 누르시면 되는데 

저 같은 경우에는 iphone6로 확인하는 편입니다. 


핸드폰으로 확인을 하지 않더라도 크롬에서 빠르게 확인할 수 있는데 

단지 핸드폰에서 보여지는 웹 화면 사이즈에 그대로 출력하는 지라 

핸드폰 화면에 맞춰 창크기를 줄여야하는 번거로움이 있습니다. 




2. 오페라 모바일 에뮬레이터

(https://www.opera.com/ko/developer/mobile-emulator)



위 방법이 크롬에서 확인할 수 있는 방법이라면 아래 방법은 프로그램을 아예 다운받아 사용할 수 있는 방법입니다. 


위 URL로 접속하시면 다운로드를 받을 수 있는 창이 뜨는데요. 

해당 창에서 운영체제(윈도우/맥/리눅스)에 맞게 다운로드받아주시고 설치를 하면 바탕화면에 해당 아이콘이 생성됩니다. 


프로그램에 접속하면 어느 모바일로 접속을 할지 선택창이 뜨게 되는데요. 

사이즈를 모른다면 custom을 선택하시고 Launch를 누르시면 해당 화면으로 넘어가게 됩니다. 


주소 입력 창에 만든 웹페이지를 드래그해서 넣으면 빠르게 모바일용으로 구현확인이 가능하죠. 




+


그 밖에 인터넷으로 접속해 확인하는 방법으로는 트로이(http://troy.labs.daum.net/) 사이트에 접속하여

디바이스 선택 후 확인하는 방법이 있습니다만 (이것도 크롬개발자도구때와 같이 사용목적이 달라서 저는 쓰고 있지 않습니다.) 

필요하신 분들은 해당 부분은 참고해두셔도 좋을 것 같습니다. 



+ 추가 내용 (19-10-23)


네이버에서 나온 브라우저 웨일에서 모바일 화면을 볼 수 있도록 지원해주는 기능이 있어 훨씬 간편하게 모바일화면을 확인해보실 수 있습니다.


3. 네이버 웨일

https://whale.naver.com/ko/ )



크롬 확장 프로그램때문에 크롬 로드 오류가 뜬다거나 쓰기 번거로우시다면 웨일을 이용해보세요. 

반응형
반응형



[tinypng/optimizilla] png 파일 용량 줄여주는 사이트


이미지 작업을 하고 사이트에 업로드를 하는 경우, png 용량 크기가 생각보다 커서 업로드를 하지 못하는 경우가 생기고는 합니다. 

그럴 때 포토샵으로 용량을 줄이는 방법보다 더 손쉽게 png 파일의 용량을 줄일 수 있는 방법이 있는데 

바로 png 파일 용량을 줄여주는 사이트를 이용하는 것이죠. 


제가 소개해드릴 사이트는 총 두 곳인데 다른 사이트들을 살펴보니 

이 두 곳이 가장 잘 알려진 대표적인 사이트같습니다. 




1. tinypng (https://tinypng.com/)



대나무 잎사귀를 먹고 있는 팬더 캐릭터가 반겨주는 tinypng 사이트입니다. 

png용량을 줄여준다라는 점에서는 optimizilla와 다르지는 않지만 

포토샵 플러그인CC 2017의 최신버전과 완벽하게 호환된다는 점과 

워드프레스의 플러그인으로도 활용이 가능하다는 특징이 있습니다. 

(워드프레스 플러그인에서 무료계정을 사용하면 매달 약 100개의 이미지를 최적화할 수 있다고 하네요.)





2. optimizilla (http://optimizilla.com/ko/)


심플한 공룡캐릭터와 함께 깔끔한 느낌을 주는 optimizilla 사이트입니다. 

용량을 줄이는데에 중점을 둔 tinypng와 다른 점이 있다면 이미지의 해상도를 조절할 수 있다는 점인데요, 

육안으로 원본과 해상도 비교 확인이 가능하며 혹시라도 용량이 덜 줄어들었다하는 부분을 

해상도를 줄임으로써 용량을 더 줄일 수 있다는 장점이 있죠.



 소개해드린 두 사이트는 최대 20개의 이미지 용량을 줄여줄 수 있고 png는 물론 jpg의 용량까지도 줄여주면서 

이미지의 품질을 최대한 오리지널에 가깝게 만들어주는 특징이 있습니다. 

용량을 줄여주는 진행상황을 막대그래프로 보여주기 때문에 진행상황을 체크할 수 있어 편리하죠. 

단순히 png를 줄이기 위해서 쓰셔도 좋고 포토샵이 없을때, png 또는 jpg의 용량을 편하게 줄이고 싶을때 쓰셔도 좋습니다. 

이렇게 편하게 png 용량 줄일 수 있는 사이트가 두군데나 있다는게 얼마나 감사한지. 

덕분에 저도 자주자주 이용하고 있습니다. 가장 중요한 사실은 이 두 사이트 전부 무료라는 거니까요. 

반응형