패널 해상도 표준과 디자인 리소스 큐레이션

반응형 웹과 미디어 쿼리가 보편화되기 전인 2010년 전후, GUI 디자이너는 결과물을 내보낼 화면의 패널 해상도를 사전에 파악하고 그에 맞춰 캔버스를 고정하는 방식으로 작업했다. 이 시기 참고되던 해상도 표준에는 방송 규격인 NTSC·PAL(아날로그 방송 신호 규격)과, 컴퓨터·모니터 규격인 VGA·XGA·HD 등이 섞여 있었다. TV·모니터·초기 모바일 기기마다 표준이 제각각이었기 때문에, 이런 해상도 정보를 한데 정리해 둔 사이트(designerstoolbox.com)는 디자이너가 타겟 디바이스에 맞는 캔버스 크기를 빠르게 확인할 수 있는 실무 참고 자료로 공유됐다.

이 글은 pxd 블로그의 "자료창고" 카테고리에 해당하는 짧은 리소스 링크 모음 글로, 해상도 참고 사이트 외에도 GUI/웹 디자인 워크플로우에 바로 쓸 수 있는 무료 아이콘셋 40종을 소개한 사이트(hongkiat.com)를 함께 큐레이션했다. 본문이 짧고 링크 위주로 구성된 이런 자료창고류 게시물은, 매번 검색해서 찾기 번거로운 참고 자료·도구·리소스를 팀 내에서 빠르게 공유하려는 실용적 목적의 글쓰기 관행을 보여준다.

이보다 석 달 앞선 2010년 3월, 같은 "GUI 가벼운 이야기" 카테고리에 올라온 "Mobile Sites"는 아직 링크 큐레이션 없이 문제의식만 짧게 던진 초기 형태였다. 저자는 국내에서는 모바일에 최적화된 웹사이트에 대한 인식이 아직 부족하지만 미국에서는 이미 보편화됐다는 점을 지적하며, 스마트폰 열풍에 힘입어 국내 기업들도 모바일 비즈니스 경쟁력 확보에 나서고 있으니 곧 다양한 모바일 웹사이트 디자인을 기대해볼 수 있다는 전망을 짧게 남겼다.

일주일 뒤인 2010년 4월, 같은 "GUI 가벼운 이야기" 카테고리에는 웹디자인의 특정 스타일 하나만을 모아 소개하는 또 다른 자료창고류 글이 올라왔다. "Minimal Website Design"은 미니멀리즘을 다룬 전시 사이트(minimalexhibit.com), 미니멀 사이트 갤러리(minimalsites.com), 미니멀 CSS 갤러리(siiimple.com) 등 미니멀 웹 디자인 사례를 모아놓은 외부 링크를 소개하고, "디자인이란 불필요한 요소를 제거하는 것"이라는 짧은 소감을 덧붙였다. 해상도 정보(designerstoolbox.com)나 완성 자산(PSD 템플릿)과 달리, 이 글은 하나의 디자인 사조(미니멀리즘)를 실천한 사이트 사례들을 모아 소개하는 스타일 레퍼런스 큐레이션에 해당하며, 이후 반응형 웹 디자인 논의에서도 반복되는 '불필요한 요소 제거'라는 원칙을 이른 시기에 짧게 언급하고 있다.

두 달 뒤인 2010년 6월 6일, 같은 "GUI 가벼운 이야기" 카테고리에는 완성된 웹사이트 한 곳을 소개하며 짧은 감상을 곁들인 또 다른 결의 글이 올라왔다. "[Layout] photoshop-like layout"은 레이아웃 리서치 중 발견한 웹사이트 madebyfudge.com을 소개하며, 브라우저 화면을 마치 포토샵 작업 캔버스처럼 꾸민 디테일—파비콘 모양, 가이드라인, 투명도 그리드, 텍스트 영역의 커서 표현—을 짚는다. 글쓴이는 "즉물적인 느낌이 유치하게 보이는 면이 있지만" 배경·커서 같은 개별 구성요소를 웹이라는 매체에 맞게 재구성한 점, 마우스 휠 조작에 따라 가이드라인 안에서 화면이 이동하는 그리드 기반 인터랙션을 인상적인 지점으로 꼽는다. 해상도 정보나 완성 자산(PSD)을 모으던 앞의 글들과 달리, 이 글은 포토샵이라는 도구의 인터페이스 메타포를 웹 레이아웃에 그대로 가져온 사례를 레퍼런스로 큐레이션했다는 점에서 스큐어모피즘과 맞닿아 있는 초기 관찰이다.

이 문제의식이 실제 링크 모음으로 구체화된 것은 나흘 뒤인 2010년 6월이다. "자료창고"가 아닌 같은 "GUI 가벼운 이야기" 카테고리에 올라온 "스마트폰 안으로 들어온 웹"은 결이 다른 큐레이션 방식을 보여준다. 스마트폰 시장이 커지며 PC 웹사이트와 별도로 스마트폰 전용 화면을 만드는 업체가 늘어나던 시점에, 이 글은 Nclud·Mail Chimp·iA·Viget Labs·Smashing Magazine 모바일판 등 실제 운영 중인 모바일 최적화 웹사이트 30여 곳의 링크만 나열해 소개했다. 해상도 '정보'(designerstoolbox.com)나 완성된 '자산'(PSD 템플릿)을 정리한 앞의 두 사례와 달리, 이미 완성되어 실제 서비스되는 웹사이트 자체를 레퍼런스로 큐레이션했다는 점이 특징이다. 목록에 포함된 Mobify는 사이트 운영자가 손쉽게 모바일 전용 버전을 만들 수 있도록 돕는 웹 서비스로, 하나의 코드로 다양한 해상도에 대응하는 반응형 웹 디자인이 자리잡기 전, PC용 사이트와 모바일 전용 사이트를 별도로 제작하던 과도기적 관행을 보여준다.

일주일 뒤인 2010년 6월, 같은 "GUI 가벼운 이야기" 카테고리에는 웹사이트를 구성하는 특정 요소 하나만을 모아 보여주는 또 다른 결의 큐레이션이 올라왔다. "웹사이트의 다양한 footers"는 해외 디자인 블로그 spyrestudios.com에 소개된 Superior Contracting Services, Fusebox Creations, Rubbik, Twitter Designs 등 20여 개 사이트의 푸터(footer) 디자인을 그대로 옮겨 소개한 글로, 별도의 분석이나 코멘트 없이 "습관적으로 디자인할 수도 있을 풋터의 공간을 다시 한 번 생각하게 해준다"는 짧은 소감만 덧붙였다. 해상도 정보(designerstoolbox.com)나 완성 자산(PSD 템플릿), 운영 중인 모바일 사이트 목록(스마트폰 안으로 들어온 웹)과 달리, 이 글은 레이아웃 안의 한 구성 요소(푸터)만 떼어내 디자인 아이디어 자체를 참고하게 하는 부분 요소 레퍼런스 큐레이션에 해당한다.

열흘 뒤인 2010년 6월 27일, 같은 "GUI 가벼운 이야기" 카테고리에는 "iPad Application Websites"라는 제목으로 별도의 설명 없이 태그 하나("웹디자인")와 함께 30여 개의 링크만 나열한 글이 올라왔다. Sorted·Spreadsheets·Twitterrific for iPad·Evernote·Things·TweetDeck 등 그해 4월 출시된 아이패드를 겨냥해 만들어진 초기 앱들의 프로모션·소개 웹사이트를 모은 것으로, 앱스토어 링크가 아니라 각 앱이 별도로 운영하던 랜딩 페이지를 대상으로 했다는 점이 특징이다. 해상도 '정보'(designerstoolbox.com)나 완성 '자산'(PSD 템플릿), 이미 서비스 중인 모바일 웹사이트(스마트폰 안으로 들어온 웹)를 모았던 앞의 사례들과 마찬가지로, 이 글 역시 새로운 디바이스(아이패드)가 등장할 때마다 그에 대응하는 앱·웹의 디자인 사례를 재빨리 모아 팀 내에서 참고하게 하려는 동일한 자료 큐레이션 관행을 보여준다. 아이패드라는 새 폼팩터의 UI/사용성 자체를 다루는 논의는 아이패드 UI 사용성을 참고.

이후 레티나 디스플레이 등 고밀도 화면이 보급되면서 '해상도를 미리 정해 놓고 그에 맞춰 디자인한다'는 접근 자체가 반응형·가변 레이아웃 방식으로 전환되지만, 특정 시점의 디바이스 규격을 파악하고 그에 맞는 자료를 정리해 공유하는 문제의식 자체는 이후의 고해상도 대응 논의로 이어진다.

이보다 넉 달 앞선 2010년 7월, 같은 "GUI 가벼운 이야기" 카테고리에 올라온 "Smartphone resolution & HD Screen"은 해상도 정보를 나열하는 데서 한 걸음 나아가, 스마트폰 해상도가 실제 HD 콘텐츠 감상에 얼마나 적합한지를 수치로 검증한 글이다. 네이버 카페 '안드로이드폰 사용자 모임'에 올라온 곰팅이(kikilo2000)님의 리서치를 출처를 밝히고 재편집해 소개했는데, 모토로이·아이폰·갤럭시S·HD2·엑스페리아X10 등 당시 주요 스마트폰의 해상도를 비교했다. 핵심 논지는 방송·영화 콘텐츠의 표준인 16:9 화면비를 각 스마트폰 해상도가 얼마나 그대로 담아내는지였다. 960x640(아이폰) 비율로는 16:9 HD 영상을 재생할 때 100px의 레터박스가 생기거나 177px을 잘라내야 했고, 800x480(갤럭시S·HD2)은 30px 레터박스 또는 54px 크롭이 필요했던 반면, 854x480(모토로이)은 16:9 비율을 오차 없이 그대로 재현할 수 있는 해상도로 소개됐다. designerstoolbox.com이 해상도 규격을 나열해 정리한 참고 자료였다면, 이 글은 특정 목적(HD 콘텐츠 감상)에 맞는 해상도의 우열을 직접 계산으로 검증했다는 점에서 같은 시기 해상도 큐레이션의 또 다른 결을 보여준다.

같은 문제의식은 2012년 "자료창고" 카테고리 글 "GUI Template 모음 (Phone & Pad PSD Freebies)"에서도 이어진다. 새 디바이스나 OS가 나올 때마다 GUI가 어떻게 바뀌었는지 스크린이펙트·리스트 높이 등 세부까지 살펴야 했던 GUI 디자이너는, 매번 직접 화면을 그리는 대신 이미 만들어진 PSD 템플릿을 무료로 배포하는 자료를 찾아 재사용했다. 이 글은 iPhone5·iPad·Galaxy S3·Galaxy Tab·Blackberry·HTC One X 등 디바이스별 PSD 템플릿과, iOS 5/6·Android 4.0 ICS/JB·Windows Phone 7 등 OS별 GUI PSD 키트를 한데 모아 소개하고, 이런 템플릿을 지속적으로 올리거나 모아 주는 사이트 4곳(speckyboy, deviantART, teehanlax, psdlist)을 함께 큐레이션했다. designerstoolbox.com이 해상도 '정보'를 정리해 참고하게 했다면, 이 글은 그 해상도에 맞춰 이미 제작된 '완성 리소스(PSD 템플릿)'를 정리해 재사용하게 했다는 점에서 같은 자료창고 카테고리 안에서도 리소스 큐레이션의 범위가 정보 → 완성 자산으로 확장된 사례로 볼 수 있다.

핵심 내용

  • 2010년 전후 GUI 디자인은 NTSC·PAL(방송 규격), VGA·XGA·HD(컴퓨터/모니터 규격) 등 혼재된 해상도 표준을 사전에 확인하고 캔버스를 고정하는 방식으로 진행
  • designerstoolbox.com: 여러 패널 해상도 정보를 한눈에 정리한 디자이너용 참고 자료 사이트
  • pxd 블로그의 "자료창고" 카테고리: 검증된 외부 리소스·도구·아이콘셋을 짧게 소개해 팀 내 공유하는 글쓰기 관행
  • 무료 GUI 아이콘셋 40종 소개(hongkiat.com) 등 워크플로우 도구 리소스 큐레이션 사례
  • GUI Template PSD Freebies(2012): iPhone5·iPad·Galaxy S3·HTC One X 등 디바이스별, iOS 5/6·Android ICS/JB·Windows Phone 7 등 OS별 무료 PSD 템플릿 모음
  • PSD 템플릿 모음 사이트 큐레이션: speckyboy, deviantART, teehanlax, psdlist
  • 자료창고 카테고리의 확장: 참고 '정보' 정리(해상도 표) → 재사용 가능한 '완성 자산'(PSD 템플릿) 정리로 리소스 성격이 넓어짐
  • Mobile Sites(2010.3, "GUI 가벼운 이야기" 카테고리): 국내 모바일 웹사이트 인식 부족을 지적하며 스마트폰 열풍에 따른 모바일 최적화 웹사이트 확산을 전망한 초기 문제 제기 글 — 석 달 뒤 '스마트폰 안으로 들어온 웹'의 실제 링크 큐레이션으로 이어짐
  • Minimal Website Design(2010.4): minimalexhibit.com·minimalsites.com·siiimple.com 등 미니멀 웹 디자인 사례 사이트를 모아 소개, "불필요한 요소 제거"라는 미니멀리즘 원칙을 짧게 언급한 스타일 레퍼런스 큐레이션
  • 스마트폰 안으로 들어온 웹(2010.6, "GUI 가벼운 이야기" 카테고리): 정보·자산이 아닌 실제 운영 중인 모바일 최적화 웹사이트 30여 곳을 링크로 큐레이션
  • Mobify: 반응형 웹 디자인 이전 시기, 사이트 운영자가 별도의 모바일 전용 버전을 빠르게 만들도록 돕던 웹 서비스
  • Smartphone resolution & HD Screen(2010.7): 모토로이·아이폰·갤럭시S·HD2 등의 해상도를 16:9 HD 화면비와 비교, 854x480이 레터박스·크롭 없이 16:9를 그대로 재현하는 해상도임을 계산으로 검증
  • 웹사이트의 다양한 footers(2010.6): 해외 디자인 블로그(spyrestudios.com)의 사이트 20여 곳 푸터 디자인을 그대로 옮겨 소개한 부분 요소 레퍼런스 큐레이션 — 해상도 정보·PSD 자산·운영 중인 사이트 링크와 달리 레이아웃의 특정 구성 요소(푸터)만 모아 보여주는 방식
  • [Layout] photoshop-like layout(2010.6.6): madebyfudge.com의 파비콘·가이드라인·투명도 그리드·커서 표현 등 포토샵 인터페이스 메타포를 웹 레이아웃에 옮긴 사례를 소개, 그리드 기반 스크롤 인터랙션을 인상적인 지점으로 평가
  • iPad Application Websites(2010.6.27): 별도 설명 없이 태그와 링크 목록만으로 아이패드 초기 앱 30여 개의 프로모션 웹사이트를 모은 글 — 새 디바이스 등장 시 관련 디자인 사례를 빠르게 모으는 동일한 큐레이션 관행을 아이패드 앱 영역으로 확장한 사례

관련 개념

출처

최종 업데이트: 2026-09-06 | 출처 9개