반응형 웹디자인에 대한 질문입니다 정보
반응형 웹디자인에 대한 질문입니다본문
안녕하세요
스마트폰 종류가 많은데 어떻게 반응형 웹디지인을 하나요?
480x800에 맞춰볼려고 생각했는데 스마트폰 해상도가 너무 다양하네요.
추천
0
0
댓글 6개

전진님의 반응형 웹 강좌를 참조해보세요. :)
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9

[Viewport Resizer] 모바일웹 해상도 커스터마이징 웹툴
http://lab.maltewassermann.com/viewport-resizer/
http://lab.maltewassermann.com/viewport-resizer/
답변 감사합니다.

크롬, 파이어폭스 , 오페라 , 네스케이프만 됩니당.

뷰포트로 작업 하세요.그리고..
640픽셀 디자인으로 작업시에는 50%로 작업을 해야하지만 4.3인치 안드로이드(랑 아이폰)에서는 괜찮게 나옵니다. 다만 상황에 따라 이미지 사이즈를 조정할게 하셔야 해요.
320으로 작업해서 1.0을 기준으로 각 단말기마다 조정해서...작업하는게 좋을듯 하며 다만 이미지를 2배로 작업해서 SRC 이미지 사이즈를 320픽셀 사이즈로 맞추어주는것도 한가지 방법입니다.
또한 브라우져 크기는 %로 코딩하는것이 가장 좋고 CSS를 통해 작업하시는게 좋습니다.폰트는 기본 14픽셀 입니다.
640픽셀 디자인으로 작업시에는 50%로 작업을 해야하지만 4.3인치 안드로이드(랑 아이폰)에서는 괜찮게 나옵니다. 다만 상황에 따라 이미지 사이즈를 조정할게 하셔야 해요.
320으로 작업해서 1.0을 기준으로 각 단말기마다 조정해서...작업하는게 좋을듯 하며 다만 이미지를 2배로 작업해서 SRC 이미지 사이즈를 320픽셀 사이즈로 맞추어주는것도 한가지 방법입니다.
또한 브라우져 크기는 %로 코딩하는것이 가장 좋고 CSS를 통해 작업하시는게 좋습니다.폰트는 기본 14픽셀 입니다.

제 개인적인 의견입니다, 참조만 하세요. ^^;
----
스마트폰을 대상으로 하는 디자인을 480x800 으로 '고정해서' 디자인하신다면 사실 '반응형'이라고 하기 힘들것 같습니다. ^^;
아마 이미지로 디자인하시기에 쉽지 않을수 있겠지만,
실제 코딩은 신실장님 말씀대로 html 마크업과 css를 이용해서,
수치가 정해진 폭보다는 %나 em 등을 이용하여 (유동형) 디자인 하시는 것을 권장하는 것 같습니다.
사실 많은 경우 스마트폰에서는 대부분의 div를 100% 로 만들고, 원하시는 순서대로 선형화하는 것 같고요.
이런 레이아웃이 변하는 시점이 아마도 테블릿의 폭에 해당하는 화면 경계치일 것 같습니다.
( http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_screenbreakpoints )
대부분 iPad의 767px 를 그 경계치로 잡는 듯 하고, 일부 div 를 좌 또는 우측으로 보내는 레이아웃을 사용하고요.
( http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=205&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_lukew_patterns )
레이아웃 용도가 아닌 실제 사용될 이미지의 경우, 레티나 디스플레이처럼 고해상도 이미지를 지원하는 경우가, 사실 제일 골치거리입니다.
이러한 1.5x나 2x 이미지를 지원하는 스마트폰에서 고해상도 이미지를 사용하도록 하는 방법 ( 반응형 이미지) 들이 있기는 합니다.
( http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=247&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_ri_impl )
이 글을 작성한 시점 이후에, 좀더 개선된 방법들이 좀 나왔지만, 기본적으로 미디어쿼리(기술)을 이용하여 고해상도 디스플레이에 따라서 (예: -webkit-min-device-pixel-ratio: 2 ) 해당하는 고해상도 이미지로 교체하는 원리를 따르는 것 같습니다.
물론 서버쪽에서 아예 기기를 감지하여 적절한 이미지를 보내는 방법 ( RESS: http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=287&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_dd ) 이 있습니다.
----
아마 디자인과 코딩을 나누던 전통적인 일흐름이라면, 위와 같은 작업을 하기가 쉽지 않은 것 같습니다.
디자인측에서 '최종' 디자인을 만들어 개발측에 넘겨주는 방식보다는
스케치 / 와이어프레임 - 프로토타입 - 실개발 각 단계마다 디자인과 개발 단계를 반복하시는 것이 더 좋은 '반응형' 디자인을 할 수 있다고들 합니다. ^^
----
스마트폰을 대상으로 하는 디자인을 480x800 으로 '고정해서' 디자인하신다면 사실 '반응형'이라고 하기 힘들것 같습니다. ^^;
아마 이미지로 디자인하시기에 쉽지 않을수 있겠지만,
실제 코딩은 신실장님 말씀대로 html 마크업과 css를 이용해서,
수치가 정해진 폭보다는 %나 em 등을 이용하여 (유동형) 디자인 하시는 것을 권장하는 것 같습니다.
사실 많은 경우 스마트폰에서는 대부분의 div를 100% 로 만들고, 원하시는 순서대로 선형화하는 것 같고요.
이런 레이아웃이 변하는 시점이 아마도 테블릿의 폭에 해당하는 화면 경계치일 것 같습니다.
( http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_screenbreakpoints )
대부분 iPad의 767px 를 그 경계치로 잡는 듯 하고, 일부 div 를 좌 또는 우측으로 보내는 레이아웃을 사용하고요.
( http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=205&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_lukew_patterns )
레이아웃 용도가 아닌 실제 사용될 이미지의 경우, 레티나 디스플레이처럼 고해상도 이미지를 지원하는 경우가, 사실 제일 골치거리입니다.
이러한 1.5x나 2x 이미지를 지원하는 스마트폰에서 고해상도 이미지를 사용하도록 하는 방법 ( 반응형 이미지) 들이 있기는 합니다.
( http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=247&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_ri_impl )
이 글을 작성한 시점 이후에, 좀더 개선된 방법들이 좀 나왔지만, 기본적으로 미디어쿼리(기술)을 이용하여 고해상도 디스플레이에 따라서 (예: -webkit-min-device-pixel-ratio: 2 ) 해당하는 고해상도 이미지로 교체하는 원리를 따르는 것 같습니다.
물론 서버쪽에서 아예 기기를 감지하여 적절한 이미지를 보내는 방법 ( RESS: http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=287&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_dd ) 이 있습니다.
----
아마 디자인과 코딩을 나누던 전통적인 일흐름이라면, 위와 같은 작업을 하기가 쉽지 않은 것 같습니다.
디자인측에서 '최종' 디자인을 만들어 개발측에 넘겨주는 방식보다는
스케치 / 와이어프레임 - 프로토타입 - 실개발 각 단계마다 디자인과 개발 단계를 반복하시는 것이 더 좋은 '반응형' 디자인을 할 수 있다고들 합니다. ^^