4K 지원 웹 사이트 디자인을위한 4 가지 팁

눈을 깜빡이고 놓쳤을 수도 있지만 지난 몇 년 동안 해결 방법에 약간의 혁명이있었습니다. 한때 실험적이고 최첨단 기술로 여겨 졌던 4K 화면은 이제 TV 화면, 컴퓨터 모니터, 심지어 스마트 폰에서 보편화되었습니다.

4K는 인치당 4 배 더 많은 픽셀을 제공하므로 웹 디자이너는 웹 사이트가 최신 화면에서 가능한 한 멋지게 보이도록해야합니다. 물론 이미 원칙을 따르고 있다면 반응 형 웹 디자인 , 그러면 웹 사이트가 어디에서 보든 멋지게 보일 수있는 대부분의 방법을 얻을 수 있습니다. 하지만 그 외에도 4K 시대에 특히주의해야 할 네 가지 영역이 있습니다.



01. 확장 가능한 그래픽 사용

아이콘, 로고 및 기타 그래픽은 래스터 이미지가 아닌 확장 가능하게 만들어야합니다.



아이콘, 로고 및 기타 그래픽은 래스터 이미지가 아닌 확장 가능하게 만들어야합니다.

웹 사이트가 4K 화면에서보기 좋게 보이려면 가능하면 래스터 이미지보다는 확장 가능한 이미지를 사용해야합니다.

래스터 형식 (jpeg, GIF 및 PNG 포함)을 사용하면 각 이미지에 고정 된 수의 픽셀이 포함되어 크기가 증가할수록 더 픽셀 화되고 흐릿 해집니다. 반면 SVG (확장 가능한 벡터 그래픽)로 알려진 확장 가능한 형식은 기하학적 모양을 기반으로합니다. 이것은 그들이 크더라도 깨끗하고 깨끗하게 유지된다는 것을 의미합니다.



물론 사진에는 여전히 래스터 형식을 사용해야합니다. 즉, 미디어 쿼리를 사용하여 사진의 고해상도 버전을 4K 및 5K Retina 화면에 제공하고 훨씬 더 작은 저해상도 버전을 휴대 기기에 제공하여 3G 및 4G 연결에서 사이트의 성능을 저하시키지 않도록해야합니다. (많은 이미지로 작업하는 경우 주목할 가치가 있습니다. 포토샵 CC 단일 이미지를 여러 크기로 동시에 내보낼 수 있습니다.)

하지만 로고, 그림, 사용자 인터페이스 도구, 버튼 등은 항상 SVG로 만들어야합니다. 이것은 Adobe Illustrator, CorelDraw 및 Affinity Designer와 같은 소프트웨어에서 수행 할 수 있습니다. 확장 가능한 그래픽에 대해 자세히 알아 보려면 반응 형 SVG를위한 10 가지 황금률 .

02. 더 큰 디스플레이 고려

New York Times 웹 사이트, Jon Yabkonski가 대형 모니터에서 캡처 한 스크린 샷



몸에 문신을 포토샵하는 방법
New York Times 웹 사이트, Jon Yabkonski가 대형 모니터에서 캡처 한 스크린 샷

웹 사이트가 4K에서 어떻게 보일지 생각할 때 해상도가 높을수록 더 크고 더 큰 화면이 더 인기를 얻게된다는 점을 기억하십시오.

따라서 우리는 사이트가 1920x1080 모니터로 표시된다는 아이디어에만 익숙해졌지만 이제는 2,560 픽셀 너비의 디스플레이에서 사이트가 어떻게 보일지 생각해야합니다. 많은 웹 사이트는 이러한 화면에서 읽기가 어려울 수 있습니다. 텍스트와 콘텐츠가 축소되고 축소되어 보이며 공백이 너무 많아 보일 수 있습니다.

Jon Yabkonski의 우수한 기사 on CSS Tricks는 이러한 더 넓은 디스플레이가 제공하는 기술적 과제를 해결하고 몇 가지 솔루션을 제안합니다.

플립 폰은 언제 유행을 잃었습니까?

03. 4K 비디오 사용

iStock by Getty Images와 같은 스톡 라이브러리는 광범위한 4K 영상을 제공 할 수 있습니다.

iStock by Getty Images와 같은 스톡 라이브러리는 광범위한 4K 영상을 제공 할 수 있습니다.

우리의 눈은 정지 이미지와 경쟁 할 수없는 방식으로 움직임에 자연스럽게 반응하기 때문에 동영상은 웹 사이트 방문자의 관심을 끌기위한 인기있는 도구입니다. 그러나 사이트에 비디오 헤더, 비디오 배경 또는 전략적인 비디오 클립을 추가하든 지금 당장 4K로 제공하여 최신 장치에서 어색하고 구식으로 보이지 않도록해야합니다.

요즘에는 저렴하고 쉬운 방법으로 4K 영상을 촬영할 수 있습니다. 스틸 카메라 , POV 스포츠 카메라스마트 폰 4K 촬영 기능을 제공합니다. 또는 시간이 없거나 드론 영상과 같이 직접 촬영할 수없는 무언가가 필요한 경우 대부분의 스톡 라이브러리에 다운로드 할 수있는 대량의 4K 비디오 콘텐츠가 있습니다.

4K 비디오 사용에 대한 자세한 내용은 4K 비디오의 새로운 물결이 디자이너에게 의미하는 것 .

04. 4K 모니터 구입

Acer S277HK와 같은 모니터를 구입하면 사이트가 4K에서 작동하는지 확인하기 위해 모든 추측이 필요하지 않습니다.

Acer S277HK와 같은 모니터를 구입하면 사이트가 4K에서 작동하는지 확인하기 위해 모든 추측이 필요하지 않습니다.

하루가 끝나면 웹 사이트가 4K 모니터에서 잘 보이도록하는 가장 좋은 방법은 4K 모니터를 구입하는 것입니다. 좋은 소식은 모든 것과 마찬가지로 지불 한만큼 얻을 수 있지만 £ 250만큼 적은 비용으로 탈 수 있다는 것입니다.

자매 사이트 인 TechRadar에서 최신 모니터의 최신 정보를 찾을 수 있습니다. 여기 , 작업에 3D, 모션 그래픽 및 / 또는 비디오 편집이 포함되어있는 경우 이 검거 너무.

더 읽어보기 :