Today :
Yesterday :
Total :
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Yesterday
Total
관리 메뉴
프로필사진 방명록
Today:     Yesterday:     Total:

호기심 가득! 모지모지!

디바이스별 웹화면 테스트, 다음카카오 TROY 본문

티스토리 | 내맘대로스킨

디바이스별 웹화면 테스트, 다음카카오 TROY

2016. 4. 23. 22:10
728x90

 

검색유입 URL에 독특한 주소가 보여서 들어가보니 이런 서비스가 있었군요~ 다음 TROY?

 

다음카카오에서 서비스를 하고 있는 서비스인데 모바일이나 테블릿 PC등 디바이스별로 웹 사이트를 테스트해볼 수 있는 서비스입니다. 요즘은 왠만한 사이트들이 반응형으로 만들어지는데 웹디자이너나 개발자에게 매우 유용한 서비스가 아닐까 생각되는군요.

 


보아하니 서비스한지는 좀 된거 같긴한데. 어쨌거나 왠만한 스마트폰이나 테블릿들은 거의 포함되어 있습니다. 위의 소개글을 보시는대로 반응형 웹사이트 개발 시 다양한 디바이스 환경에서의 테스트를 도와주는 서비스입니다.





URL을 접속하면 첫 화면은 위와 같이 매우 심플합니다. 간단히 레이아웃을 설명드리면 왼쪽에는 각 디바이스기기 목록이 나옵니다. 디폴트는 삼성의 갤럭시 노트4군요. 그리고 상단엔 웹브라우저와 비슷하게 웹사이트 주소를 입력하는 곳이 있고요~ 상단 오른쪽은 기타 설정을 하는 메뉴들이 보입니다. 





제 블로그 주소를 넣어보니 위와 같이 나타납니다. 폰트는 100% 적용은 안되고 레이아웃만 확인해볼 수 있는 것 같네요.





상단 오른쪽 메뉴들을 좀 살펴볼까요? 일단, 돋보기모양은 브라우저의 그 돋보기버튼의 기능이 아닙니다. 위와 같이 화면에 나타난 디바이스 크기를 늘렸다 줄였다할 수 있는 기능입니다.





그 옆의 아이콘은 익숙하시죠? 테스트결과를 공유할 수 있는 기능이군요~





그 옆의 또다른 설정버튼을 누르면 위와 같은 메뉴가 나타납니다. 첫줄엔 텍스트/리스트 형테로 디바이스 목록이 나타납니다. 그리고 두번째 설정은 디바이스 기기에 주소창을 보여줄지 선택하는 메뉴입니다. 그리고 아래쪽은 오류보고와 서비스설명...


 



자, 그리고 가운데 디바이스를 좀 살펴볼까요? 디자인은 선택한 기기의 디자인과 유사하게 나타납니다. 그리고 추가로 세로보기 가로보기를 선택할 수 있는 메뉴가 기기 상단 오른쪽에 있습니다. 그 왼편엔 주소창을 보일지 말지 설정할 수 있는 버튼이 있네요~





가로보기하면 위와 같이 화면이 기울어져서 가로보기 시의 화면이 나타납니다.



반응형 사이트를 제작하는 개발자나 디자이너에게 매우 유용한 서비스같네요.^^

다음 TROY 서비스 주소는 아래와 같습니당~

http://troy.labs.daum.net



 

무지!

공감하신다면 아래 하트버튼 꾸욱~!!!!


 


728x90
댓글달고 친해지기 ()