어차피 모바일 코딩은 가로 320px기준으로 코딩해야합니다.
디자인 작업을 640px로 주는 것은 이미지때문에 그렇습니다.

예를 들어 박스의 height값이 60px, border값이 2px로 되어있다면 실제 코딩은 30px, 1px로 코딩하면 됩니다.

대신 이미지나 아이콘같은 요소들은 받으신 파일그대로 잘라서, 크기를 반으로 줄여주셔야겠죠~
예를 들면 실제 이미지가 60px*60px이면 그대로 잘라서 업로드해두시고, 코딩하실때는 30px*30px로 크기를 설정해주시면 됩니다.

이렇게하는 이유는 ratio값이 1이상인 모바일기기 때문인데요~
(요즘 보통은 1.5~2가 대부분입니다.)

아이폰4 이상을 예를 들면, 해상도가 가로 640입니다. 그렇다고 해서 뿌려지는(실제로 보여지는) 해상도는 640이 아니라 320입니다.
그만큼 밀도가 2배로 조밀해졌다는 소리입니다.

실제로 예를들어 코딩해보시면 알겠지만 320px기준으로 30px*30px 로 보여질 이미지라고 해서 그대로 30*30으로 이미지를 잘라서
코딩하고 확인해보시면 이미지가 뿌옇게 흐려질 것입니다.

보여질 이미지가 30*30이라도 이미지작업은 60*60으로 해야만 이미지가 깔끔하게 보인다는 소리죠~

두서 없이 설명을 해서 죄송하네요~저도 첨에 할때 해상도에 대한 개념이 없어서 많이검색을 해봤답니다.
작업하시기전에 어느정도는 검색을 하셔서 해상도에 대한 개념을 이해하시고 코딩을 하시는편이 좋을 듯합니다.

탈퇴회원

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-11-20 (수) 14:05:08

깔끔한 정리 감사합니다. 많은 도움이 되었네요. :)
질문하신 분은 이 내용도 읽어보시면 좋겠네요. (물론 저도 ㅎㅎㅎ)
http://uxd.so/h/retina-web-raster/

스카이워러

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-11-20 (수) 15:18:23

와...좋은 답변이네요...^^ 덕분에 좋은거 알았습니다..감사합니다..^^

HackYa

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-11-21 (목) 04:40:28

그냥 짧게 얘기해서 "retina-ready" 되어야 한다, 이 말씀이신데, retina display 에 대응하기 위해 retina 용 이미지를 따로 준비하는 등 방법은 몇가지가 있지만, 결국 결론은 front-end developer 의 일이 많아집니다.

그래서 일을 줄일려면 svg 사용, 또 font awesome 같은 이미지 폰트를 적극 사용하는 것 이 좋은 것 같습니다.

티즈코리아

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-12-04 (수) 16:23:14

와우~ 감사합니다~~^0^

빨간소금쟁이

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-12-11 (수) 16:13:43

잘 봤습니다.

zzzz

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-11-21 (목) 16:06:20

png24, 32
유손실, 무손실

파아랑

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-11-22 (금) 04:10:10

일단 크게 만들고 사이즈에 맞게 들어가게 만들어서 선명하게 보이게 한다는거..

senv

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2013-12-10 (화) 13:31:11

아이폰은 레티나여서 320사이즈로 코딩하게되면 이미지가 찌직거려요
그래서 640이미지 사이즈를 놓고 320으로 작업하게되면 이미지가 선명하게 되니까 그래서 그렇게 주신것 같네요

댓글을 작성하시려면 로그인이 필요합니다.

디자이너톡

918건

제목	글쓴이	날짜	조회
즐겨찾기 2차 공개ㅠ.ㅠ 쉽지 않네요.. [2]	디자인배틀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-27	조회 1,451
반응형 홈페이지 관련해서 문의 드립니다. [4]	올타 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-26	조회 1,584
모바일 웹 디자인 의뢰합니다.	사랑함수 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-23	조회 1,913
모바일 페이지 제작 의뢰 [1]	노마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-23	조회 1,328
어렵게 모은 디자이너를 위한 즐겨찾기 목록입니다. [7]	디자인배틀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-20	조회 2,059
폰트 Adobe가 드디어 단속을 시작했습니다. [7]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-18	조회 8,713
모바일웹 제작 문의 드립니다. [2]	열심히정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-17	조회 1,362
즐겨찾기 조사를 기준으로 사이트 변경하였습니다. [5]	디자인배틀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-09	조회 1,194
도로명 주소로 바뀌는거요~ [3]	AnnieK 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-09	조회 1,314
젊은디자이너분들 [5]	임구 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-08	조회 1,755
폰트 구매를 한번 하면 계속 쓸수 있나요? [1]	예리한맘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-06	조회 1,479
즐겨찾기조사 [10]	디자인배틀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-12-02	조회 1,397
폰트구입은 어디서 하나요? [4]	소수리꼬 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-30	조회 1,788
디자이너의 일과가 궁금합니다. [7]	디자인배틀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-30	조회 1,854
코딩 때문에 우울해요 [8]	더딘하루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-26	조회 1,993
티스토리 초대장 3장있어요~필요하신 분 드립니다. [13]	달오벌 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-26	조회 1,193
웹표준 코딩 기준이 어느정도인가요?? [5]	록펠러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-26	조회 1,934
모바일코딩에 대해서 궁굼한점 [11]	jessica8318 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-20	조회 3,542
디자인 견적 기준 궁금합니다. [10]	여름나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-11	조회 2,462
디자이너분들, 자신의 일에 자신감을 가지십시오. [13]	T2H1 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-11	조회 1,808
페이스북 코멘트를 웹사이트로 불러올때 [8]	HackYa 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-06	조회 1,999
이글 좀 봐주세요. [8]	HackYa 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-05	조회 2,182
템플릿 좀 봐주세요. [14]	호빠앙 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-05	조회 1,644
css 초보자의 질문입니다. [11]	류크자케 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-04	조회 1,313
디자이너 VS 프로그래머 [15]	글록26 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13-11-01	조회 2,036

글쓰기