반응형 스킨 테스트 할 수 있는 사이트

반응형 스킨 테스트 할 수 있는 사이트

안녕하세요~ 버블프라이스 입니다.

오늘은 현재 티스토리 블로그를 운영하시고 반응형 스킨을 사용하시는 분들께 도움이 되는 글입니다. 반응형 스킨을 사용하시면서 사이즈별로 화면이 어떻게 보이는지, 스마트폰 모바일 환경에 따른 화면비율이나 사이즈 등의 변화등을 살펴볼 수 있는 유용한 사이트들에 대해 알아보겠습니다. 

현재도 PC 환경에 적합한 기본형 Skin을 사용하시는 분들이 계시지만, 모바일 시대인 만큼 다양한 디바이스에서 동일한 환경을 지원하고 서로 다른 환경에서도 동일한 사용자 경험을 제공하는 반응형 스킨으로 변경을 하게되었는데요~ 

각기 다른 디바이스에서 화면에 내가 작성한 글이 어떻게 보이는지 궁금했던 적은 없으신가요?

지금부터 알아보겠습니다.

"반응형 스킨 테스트 할 수 있는 사이트"

예전에는 pc 환경에서 보기에 좋은 기본형 skin 을 사용했습니다.

가로 x 세로 사이즈를 맞춰서 이미지를 넣으면 사진이 화면에 깨지지 않게 정상적으로 나왔습니다. 하지만 모바일 시대에 들어가면서 스마트폰으로 인터넷 활동을 하시는 분들이 대부분으로 거의 필수적인 시대가 찾아왔습니다. 다양한 스마트폰들이 출시됬고, 화면비에 따라 특정 기기에서는 화면비가 맞지 않거나 너무 작게 나와서 짤리는 부분, 무언가 아쉬운 부분이 생겼습니다. 그런 아쉬움들을 해결할 수 있게 모바일 환경에 최적화 되어 나온 skin이 반응형 스킨 입니다. 

본문에서는 총 세 곳의 사이트를 소개할까 하는데요~

먼저, 

mattkersley.com/responsive

입니다. 이곳에서는? (240 x 320 (small phone), 320 x 480 (iPhone), 480 x 640 (small tablet), 768 x 1024, 1024 x 768)  등의 디바이스에서 반 응 형 스 킨 이 얼마나 잘 작동하는지 간단히 test 해볼 수 있는 site 입니다. 

위의 주소에 접속을 하면?

1번 사진과 같은 기본 화면이 나오는데요~

사용법으로는?

너무나 간단한데요~

URL 을 입력하는 입력창에 현재 운영중이신 Site 나 Blog 주소를 넣어주신 후에 입력창 옆에 Device sizes 를 클릭 해주시면 됩니다.

그러면 2번 이미지 처럼 나옵니다. 마우스 휠을 통해 각 항목의 사이즈별로 화면에 어떻게 표시되는지 확인이 가능합니다. 현재 제가 사용중인 skin 은 가장 작은 size인 240 x 320 (small phone)와 320 x480 에서는 제목이 길으면 조금 짤려서 화면에 보여지는 것을 알수가 있습니다. 320 x 480~ 부터 1024 x 768 크기에서는 모두 정상적으로 나옵니다.

위의 site의 장점은?

- 모든 화면비율에 맞게 반 응 형 스 킨이 잘 작동하는지를 확인이 가능합니다.  

"반응형 스킨 테스트 할 수 있는 사이트"

다음은 http://www.responsinator.com 입니다.

주요 특징으로는?

url 입력창에 주소를 넣으면 다양한 디바이스환경에서 변화되는 모습을 관찰할 수가 있습니다.

보여지는 형태는 안드로이드, 아이폰, 아이패드 형태가 있습니다. 사이즈 별로 1024 까지 확인이 가능합니다.

스크롤을 아래로 내리면 형태가 변합니다.  

"반응형 스킨 테스트 할 수 있는 사이트"

위와 같이 형태 아래에는 iPhone 6-8, 안드로이드 , width: 폭이 얼마나 되는지 수치가 나와 모바일에서 기본 화면과 가로로 뒤집었을때 모습 등을 쉽게 관찰할 수가 있습니다.

"반응형 스킨 테스트 할 수 있는 사이트"

다음 소개드리는 site는?

http://responsivepx.com 입니다.

주요 특징으로는?

url 주소를 입력 후 Open 을 누른 다음  Width(가로폭) 과 Height (세로폭)을 스위치를 이동해서 사이즈를 쉽게 조절할 수 있고, 직접 입력창에 수치를 넣어서 

원하는 사이즈 비율일때 화면에 어떻게 보여지는지 간단히 확인을 할 수 있습니다.

사용법은 위와 같이 

먼저 운영하고 계신 site 의 url 주소를 넣어주신 다음 Open 을 누른다음 Width (가로폭) 및 Height (세로폭)을 임의로 입력해서 화면에 얼마나 잘 표시가 되는지 테스트 해볼 수가 있습니다.

입력하는 수치에 따라 화면에 바로바로 표시가 되기 때문에 정말 간편합니다.

다음은 마지막으로 소개할 Site 인데요~

이름을 한두번쯤 들어보셨을것 같습니다. 트로이라는 곳인데요~

주소는? http://troy.labs.daum.net 이고

주요 특징이라면?

왼편에 (Samsung, Apple, LG, Google, Pantech, HTC, Sony, Xiaomi, Huawei, Lenovo, ZTE, PC Screen) 40개 이상의 인기있는 디바이스 형태에서 보이는 이미지를 확 인할 수가 있습니다.  위에서 소개드린 곳과 다른 점은? 40개의 디바이스에 맞는 형태의 이미지를 맞춰서 볼 수 있다는 것이고, 멀티스크린 모드를 지원해 여러개의 디바이스를 동시에 출력시켜놓고 비교해볼 수 있습니다. 

"반응형 스킨 테스트 할 수 있는 사이트"

사용법은 위에서 소개드린 site와 같이 url 주소를 입력 후 돋보기 모양을 클릭 해주시면 되겠습니다.

그런다음 왼편에 있는 40개의 디바이스를 선택 해주시면 사이즈별로 확인이 가능합니다.

여기서 size는 위의 이미지에서 보면? Samsung Galaxy S8, S8+, Note8의 경우는 360 x 640 이고, Galaxy S2, S1은 320 x 533 입니다.

이렇게 확 인이 가능합니다.

이번에는 Apple의 iPhone 6(s), 7, 8 사이즈는 375 x 667를 선택 했을때 화면입니다. 아래에 있는 다른 하위모델들을 선택해 간단히 비교해볼수도 있습니다.

LG 의 Optimus G Pro 와 Huawei Ascend Mate 2 와 비교도 가능합니다.

모두 현재 사용하고 있는 skin 에서 정상으로 표시되고 있는 것을 확인 할 수 있습니다.

이상 오늘 내용 유익하셨나요~?

언제나 많이 웃으시고 건강하세요-

감사합니다.