그동안 대부분의 웹사이트는 특정기기만을 위한 웹디자인을 할 필요성이 없었습니다 하지만 아이폰X는 다릅니다
당신이 웹페이지에서 아무런 대응을 하지 않을시 가로화면에선 이렇게 될것이거든요
그래서 Webkit에서 아이폰X를 위한 새로운 가이드라인을 제시하였습니다
링크의 내용을 충실히 따르면 당신의 웹페이지는 아이폰X에 최적화된 모습을 갖추게 될것입니다 심지어 가로화면에서도요
인터넷 / 소프트웨어
:
윈도우즈, 리눅스, 기타 운영체제, 각종 어플리케이션, 프로그램, 소프트웨어, 인터넷, 인터넷 서비스에 대한 이야기, 소식, 테스트, 정보를 올리는 게시판입니다.
소식
2017.09.23 23:27
아이폰X에서 당신의 웹사이트가 좋게 보이는 방법
| 참고/링크 | https://webkit.org/blog/7929/designing-w...-iphone-x/ |
|---|
-
이 얼마나 고맙고 관대한 처사인지.. -
끔찍하네요 정말. 저러면 베젤리스 할 의미가 있는지.... -
기글하드웨어는 아이폰 X에 최적화된 화면을 제공하지 않는다고 공식적으로 알려드립니다.... -
Kylver
2017.09.24 00:00
왜죠!!! -
비★밀이요.
-
어차피 적용할 부분도 없지 않나요? full-width nav바가 있는 것도 아니고, botton-fixed nav바가 있는 것도 아니고, 배경에 그림이 들어가거나 하는 것도 아니니... 그냥 viewport-fit=auto로 놔두면 되지 싶네요. -
?
공★식이요.
-
한국인의 절반을 무시하시는 처사!? -
구웨웩!! -
?
쿨피스엔조이님 축하합니다.
팡팡!에 당첨되어 5포인트를 보너스로 받으셨습니다. -
이거슨 낄피셜!! -
좋아요 +1 -
에라이 이젠 아주 웹사이트 보고 아이폰에 맞추라고 하네 염X...
정말 애플 제품만이 받을 수 있는 수준의 쉴드로군요. -
아이폰 X만이라고 하기엔 무리가 있는 게, 디스플레이의 형태나 (예: 원형 디스플레이 등...) UI의 형태 등 (예: 전체화면 컨텐츠에 오버레이되는 컨트롤 등...) 에 따라 safe area를 지정해줄 수 있는 specification이 웹킷에 추가되는 것입니다. 지금이야 아이폰 X밖에 없기야 하지만, 그리고 앞으로 디스플레이의 형태나 UI가 어떤 방향으로 발전할지는 저도 잘 모르겠지만 의미 있는 개선이라고 봅니다.
예를 들어, 엣지 커브드 디스플레이의 엣지 부분 등 자동으로 기기에서 정해주는 영역만큼 padding을 준다던가 할 수 있게 됩니다. 지금까지 엣지 스크린을 사용한 제품이 나온지 좀 된 것 같은데, 오히려 Webkit 개발의 선두에 있는 애플이 아이폰 X를 냈기에 이런 개선도 일어날 수 있지 않았는가 싶네요. -
오 이런식으로 볼 수도 있는거군요 -
?
필립님 축하합니다.
팡팡!에 당첨되어 10포인트를 보너스로 받으셨습니다. -
웹디자인을 직접 한 지는 좀 되었지만, 지금도 꽤나 관심있게 지켜보고 있습니다. 단순히 "몇 포인트 비워놓으면 됩니다" 나 OS 네비게이션 등으로 때우기 보다는 훨씬 더 나은 방법이기도 하고, 사실상 웹킷이 de facto standard가 된 상황에서 다른 기기에서도 활용성이 높아질 부분이지 싶네요.
-
?
마커스님 축하합니다.
팡팡!에 당첨되어 5포인트를 보너스로 받으셨습니다. -
?
엣지 커브드 디스플레이를 고려했다면 3 면이 아니라 4 면 모두 padding 를 줄 수 있는 형태로 가야 할텐데요.
지금 위 글에 나온거만 봐서는 3 면 패딩뿐인거 같은데.. -
4면 다 있습니다. css에서 constant() 로 User Agent에서 정하는 각종 상수를 호출할 수 있으며, 위 패딩의 경우 safe-area-inset-top 으로 사용.
https://github.com/w3c/csswg-drafts/issues/1693 를 참고하시면 더 도움이 될 것 같네요. -
아이폰 X니까 X같은 디자인이 필요한거죠! -
?
x같은 발상이네요
-
호무라
2017.09.24 10:51
저래도 어~썸, 슷꼬이, 용기다 저러니 원.. -
정말 굉장히 갱장하고 괭장하네요. -
?
디스플레이에서 베젤이 없어졌으니 대신 페이지에서 귀여운 베젤을 드리겠습니다
-
앗... 너무 부럽다... -
?
X같은 발상! X같은 디자인!
-
?
안해도 별로 상관없는거같은데...
-
뭐 어차피 아이폰 X 보기 좋으라고 하는 가이드라인이고 딱히 안 해도 보는 데 문제가 없긴 하죠. 정말 신경쓰는 사람들이나 바꿀 듯. -
Kylver
2017.09.24 23:43
저도 이게 맞다고 생각되네요. 궂이 맞출필요는 없죠.
-
아니 저 빨간부분까지 다 표시되게끔 해줘야지;;
저러면 보기만 이쁘지 실용성은 ...아이구 -
정말 X같군요! 좋은건가? -
근데 어차피 가로로 웹사이트 보는거보다 세로로보는게 많으니 안해도 상관없을것같네요 -
?
디자이너란 작자들이 강요하는 꼬라지를 보면 이 인간들이 두 발을 땅에 디디고 사는 인간인지 궁금해집니다.
작성된지 4주일이 지난 글에는 새 코멘트를 달 수 없습니다.
-
Read MoreNo Image
국내 망사용료법 우려로 USTR 공식항의
미국 무역대표부 ( USTR ) 가 한국의 넷플릭스 - 구글 등 글로벌 빅테크 겨냥해 추진하던 ' 망 사용료법' 에 대해 우리정부 상대로 통상 마찰 가능성 제기한걸로 확인되었습니다. 망사용료법은 이달 말 방한을 앞둔 조 바이든 미 대통령이... -
Read MoreNo Image
일론 머스크, 트위터 인수 일시 보류
일론 머스크가 트위터의 인수 절차를 일시 보류한다고 발표했습니다. 다만 인수 자체는 진행 중이라고 덧붙이긴 했습니다. 트위터는 최근 SEC 규제 문서에서 스팸 봇이 전체 사용자의 5% 미만이며, 광고를 보는 사용자 수는 2억 2900만명... -
Read MoreNo Image
업비트, 루나 거래지원 종료
루나가 바이낸스에 이어 국내 거래소인 업비트에서도 거래를 중단합니다. 폭락한 와중에 거래소의 시세 차이를 이용해 벌었다느니, 폭락 후 잠깐 반등하는 순간을 노려서 벌었다느니 등등의 괴담(?) 등이 오갔는데, 업비트에서 거래 중단... -
Read More
바이낸스, 한국산 암호화폐 '루나' 상장폐지
세계 최대 암호화폐(가상자산) 거래소 바이낸스가 한국 시간 기준 13일 오전 9시40분 루나(LUNA)를 상장 폐지한다고 공지했다. 저기 도원이란 사람은 루나를 만든 사람입니다. -
Read MoreNo Image
나랏돈으로 비트코인 산 엘살바도르.."평가손실 490억원 추정"
엘디아리오데오이는 부켈레 대통령이 트위터로 공개한 비트코인 매수 수량과 당시의 비트코인 평균 가격을 계산해, 그가 지금까지 9회에 걸쳐 총 2천301개의 비트코인을 총 1억447만달러(약 1천348억원)에 산 것으로 추정했다. 전날 비트... -
Read More
이더리움, 2000달러까지 떨어짐
이더리움이 2000달러 아애로 떨어졌다가 지금은 다시 올라오긴 했는데 하여간 2000달러 선까지 내려왔습니다. 2021년 7월 이후 최저치입니다. 이더리움 뿐만 아니라 요새 가상화폐 분위기들이 다들 안 좋지요. 이더리움은 다른 문제도 겪... -
Read MoreNo Image
질문에 올려야 하는 동영상은 어떤 사이트에서 업로드하는게 좋을까요?
가끔 질문을 하다 보면 말로만으로 설명이 되지 않아서 동영상을 올려야 할 때가 있는데 GIF는 용량이 크고 유튜브는 계정 정보가 나오니 올리기가 좀 꺼러집니다. Vimeo도 알아보고 있는데 적합한 사이트 없을까요? -
Read More
크롬 주소창이 까매졌어요...
한글로 구글링 하니까 안나오길래 기글에 물어봅니다. 구글보다는 역시 기글이죠 뭐가 문제일까욥 + 테마는 별도로 안쓰고, 이렇게 색 조합만 바꿔 썼습니다. 근데 갑자기 주소창만 다크해졌네요... + 진짜 갑자기 이렇게 됐고... -
Read MoreNo Image
어도비 프리미어 프로 2022년 5월 업데이트
어도비 프리미어 프로의 2022년 5월 업데이트 내용입니다. gif 파일로 내보낼 때 투명도를 설정 가능합니다. 제목/및 그래픽에서 개체 배포가 가능합니다. macOS에서 10비트 4:2:0 HEVC 내보내기 작업 시 속도가 10배 빨라졌습니다. AMD ... -
Read MoreNo Image
넷플릭스, 광고가 포함된 저가형 요금제와 계정 공유 단속?
넷플릭스의 내부 편지에 의하면, 올해 말이 되기 전까지 광고를 보여주는 저가형 요금제를 추가하고 계정 공유를 막는 방안을 도입할 수도 있다고 합니다. 넷플릭스는 지난 몇 년 동안 가격을 꾸준히 올렸으며 올해는 가장 큰 폭의 인상을... -
Read MoreNo Image
국내서 차단됐던 해외 성인사이트 접속…방심위 "원인 파악 중"
일부 누리꾼은 접속 인증 사진을 첨부한 채 새 정부가 정책을 바꿔 해외 성인물 사이트 접속 차단을 해제한 것 아니냐는 관측도 제기했다. 그러나 방송통신위원회 관계자는 "제보를 받고 알아봤지만, 정책에는 변화가 전혀 없다"고 밝혔다... -
Read More
https SNI 차단 일부 해제?
SNI 차단되었던 일부 사이트가 현재 특정 통신사망에서 정상적으로 접속되고 있다고 합니다. 윤 대통령 임기 첫날에 일어난 현상이라 정부의 의도인지는 모르겠으나, 엠바고 걸린 것처럼 관련 뉴스 기사가 전혀 나오지 않는 상황에서 순... -
Read More
테라/루나 코인 대폭락
달러와 1대 1로 교환을 보장하며 가치가 정해진 스테이블 코인인 테라 코인의 개발사가, 테라 코인 2천억원을 빼고 또 다른 테라 코인 고래도 1000억원을 빼는 등 거액이 빠져나가면서 테라 코인이 폭락하고, 테라 코인과 연동된 루나 코... -
Read MoreNo Image
머스크 “트럼프 트위터 계정 영구정지 철회”
머스크는 "계정 정지가 트럼프를 잠재우지 못했고, 오히려 우파들 사이 목소리를 키웠다"며 "도덕적으로 잘못됐고 바보 같은 조치였다"고 말했습니다. 그러면서 트위터를 '자유 광장'으로 만들기 위해 차별이 있어선 안된다며, 이... -
Read MoreNo Image
원스토어 공모가, 밴드 하단보다 낮은 2만5000원 유력
기업공개(IPO)에 나선 애플리케이션(앱) 마켓 원스토어가 기관 수요예측에서 흥행에 실패하며, 공모가를 희망 공모가 범위(밴드) 하단보다 낮은 2만5000원 정도로 결정할 확률이 높은 것으로 알려졌다. 회사측은 낮은 가격에라도 상장을 ...
포인
까마귀
bianryeast
