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

2018.04.08 23:55


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


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

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


현재도 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 에서 정상으로 표시되고 있는 것을 확인 할 수 있습니다.


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

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

감사합니다.

작성자

Posted by 버블프라이스

작성자 정보

IT, 뷰티, 엔터테인먼트, 일상이야기 관련테마 블로그

태그

관련 글

댓글 영역

  • 이전 댓글 더보기
  • 프로필 이미지
    2018.04.09 12:45 신고

    홈페이지 개발시에도 반응형을 적용해보았는데
    개인적으로는 그다지 좋은 걸 모르겠더군요
    즐거운 한주되세요 ^^

    • 프로필 이미지
      2018.04.10 06:08 신고

      넵, 맞습니다 반응형이라서 무조건 적으로 좋다는
      것은 잘못된 말일 것입니다. 오히려 기본스킨보다 속도가 느려지고, 안좋은 점들이 많더라고요, 조금 불편하더라도 이미지 사이즈를 맞춰서 업로드 한다면 모바일에서도 전혀 문제가 되지 않더라고요^^
      오늘도 방문해주셔서 감사합니다.

  • 프로필 이미지
    2018.04.09 13:29 신고

    저희도 반응형스킨을 사용한다고 남편한테 들었던거같아요. 하고나면 보기가 편한거는 사실인거같아요

    • 프로필 이미지
      2018.04.10 06:09 신고

      넵, 한눈에 보기에는 편한 것 같습니다. 별도의 이미지 사이즈 등을 정하지 않아도 자동으로 되는 부분 등은 정말 편리한 것 같습니다. 하지만 기본스킨에 비해서는 셋팅에 따라 페이지 속도에 영향을 받다 조금 느린 것이 단점이더라고요^^

  • 프로필 이미지
    2018.04.09 13:30 신고

    오 확인 가능한 사이트가 많네요! 저는 한 곳만 알았는데 ㅎㅎ 저 중의 한 곳 좌표 찍어서 새롭게 테스트 해봤네요 기기별로 확인가능한 것두 좋네요^^ 덕분에 도움 얻고 갑니다. 활기찬 한 주 되세요^^

    • 프로필 이미지
      2018.04.10 06:10 신고

      넵, 유용한 사이트들이 정말 많죠?
      사이즈를 직접 입력해서 볼수도 있고 기기 모양으로 볼 수 있어서 블로그나 사이트 운영 초반에 테스트 후 이용하시면 좋을것 같습니다^^ 새롭게 시작하는 한 주 멋지게 보내시길 바래요

  • 프로필 이미지
    2018.04.09 18:58 신고

    아! 반응형 스킨을 테스트 해볼수도 있군요! 버블프라이스님 블로그는 늘 알찬 정보가 가득한 것 같아요!^^

  • 프로필 이미지
    2018.04.09 21:09 신고

    너무나 좋은 팁입니다. 이런 정보야말로 필요한 이들에게 꿀팁이 아니겠어요!^^ 추천 만땅~!

  • 프로필 이미지
    2018.04.09 21:15 신고

    반응형 스킨을 테스트해 볼 수 있다니, 신기한 사이트들이 많네요.^^
    이번 한 주도 행복하게 보내시길 바랍니다.~

  • 프로필 이미지
    2018.04.09 22:40 신고

    반응형 스킨을 테스트 해 볼수 있다니 좋은 정보네요 ㅎㅎ 항상 좋은 정보 감사합니다 버블프라이스님 :-)

    • 프로필 이미지
      2018.04.10 06:13 신고

      적게라도 도움이 되었어야 하는데요^^
      행복한 한 주 보내시길 바래요-
      늘 방문해주셔서 감사합니다^^

  • 프로필 이미지
    2018.04.09 23:01 신고

    오 기기마다 이렇게 확인해볼 수 있다는건 참 좋은 기능이네요!
    몰랐던 정보인데 감사합니다 ^^

    • 프로필 이미지
      2018.04.10 06:14 신고

      앗 ^^ 기기별로, 사이즈를 직접 입력해서 반응형 스킨이 잘 반응하는지 테스트 해보는 사이트 입니다.
      오늘도 방문해주셔서 감사합니다- 하스텐님

  • 프로필 이미지
    2018.04.10 00:17 신고

    아하 여기였군요
    예전에 한참 찾았던 기억이 납니다 ㅎㅎ

    • 프로필 이미지
      2018.04.10 06:15 신고

      예전에 한참 찾으셨었군요?
      저도 요즘에는 어떤 사이트를 찾고자 하면 정작 기억이 안나서 중요하다 싶은 사이트는 이제 즐겨찾기 해놓고 있습니다 ㅎㅎ

  • 프로필 이미지
    2018.04.10 10:31 신고

    반응형 테스트 해볼 수 있는 사이트가 있으나,
    좀 더 다양한 테스트를 해볼 수 있겠군요~!

  • 프로필 이미지
    2018.04.10 21:39 신고

    사이트마다 조금 다르게 스킨을 테스트 해볼 수 있군요.
    행복하세요^^

  • 프로필 이미지
    2018.04.11 15:27 신고

    반응형 스킨을 테스트하는 사이트가 많이 있네요. 저도 해봐야겠어요~정보 감사합니다 !!

  • 프로필 이미지
    2018.04.11 22:52 신고

    어머 이렇게나 편리하고 좋은 사이트가 있었네요 버블프라이스님 덕분에 유익한 정보 얻어갑니다~~

  • 프로필 이미지
    2018.04.13 14:44 신고

    와 진짜 좋은 정보네요. ㅎㅎ 저번에 추천해주신 유료 스킨은 아직 비싸서 못쓰겠어요. ㅎㅎ

    ㅠ.ㅠ 스킨비도 안나와서요. ㅎㅎ 하지만 다음엔 쓸 수 있도록 노력중입니다. ㅎ

  • 프로필 이미지
    2018.04.13 15:46 신고

    앗 이런곳이 있군요! 가끔 스킨 새로 적용시킬 때 이런 게 필요한데...
    고치고 있는 모습을 방문객분들에게 보여드리기가 민망해서ㅋㅋㅋ
    감사합니다!!

블로그