티스토리 뷰

UI 구현 표준 검토하기

UI 구현 표준 수립

실제 페이지 제작을 위하여 아이콘, 레이아웃, 화면 개발 환경에 적합한 표준을 수 학습 목표 립할 수 있다.
UI 구현 표준을 이해관계자와 검토하여 최종 표준안에 반영할 수 있다.

UI 구현 표준 수립

  • UI 구현 표준
    1. 모바일운영체제에대한표준: 모바일환경은각단말의OS와브라우저종류에따 라 큰 차이를 보인다. 모든 모바일 서비스는 다양한 사용자의 디바이스 환경에서 호환되도록 해야 한다. 최근에는 특별한 개발이슈가 발생하지 않는 한 모바일 웹으 로 개발하는 것을 기본으로 한다. 다만, 모바일 웹방식으로 제공시 기술적 제약이 있 거나 현저하게 비용이 증가할 우려가 있는 경우에는 다른 방식으로 제공할 수 있다. 이 경우에도 모바일 네이티브 앱 방식보다 모바일 앱의 기술과 모바일 웹의 기술을 동시에 적용하여 개발하는 하이브리드 앱(Hybrid App) 방식을 우선적으로 고려하여야 한다. 모바일 웹과 하이브리드 앱은 HTML, CSS, Javascript를 사용하여 구현된다.
    2. 증강현실 등 기술적 필요에 의해 앱(App)으로 개발이 불가피한 경우는 각각의 대상 디바이스별로 개발해야 한다. 특정한 사용자 집단을 대상으로 하고, 웹으로 구현 불 가한 기술 등을 사용해야 하는 등 특정한 사유가 있는 경우에 한해서는 앱으로 개발 할 수 있다. 앱 개발 시 각 플랫폼이 제공하는 UI 가이드 표준에 따라 개발하여 각 디바이스별로 최적의 기능과 UI를 제공하되, 모바일 서비스의 UI 디자인 가이드라인 기본원칙은 동일하게 준수하여 개발하여야 한다.
    3. 개발언어에 대한 표준 : 대부분의 모바일 웹과 하이브리드 앱은 HTML, CSS, Javascript를 사용하여 구현된다. 개발언어에 대한 UI표준은 모바일 웹과 하이브리드 앱에 공통되는 사항들로 기술하며, 이 두 가지 포맷의 서비스는 가이드에서 제시하 는 공통된 UI 표현을 적용하여 사용자에게 일관된 경험을 제공하여야 한다.
    4. 화면 해상도 : 모바일 폰의 기본 브라우저(Browser) 해상도는 320*480 PX이며 지 속적으로 고해상도의 스마트폰이 출시됨에 따라 확장성을 고려해야 한다. 또한 스마 트폰의 PPI(Pixel Per Inch)는 LCD모니터의 PPI(72ppi)보다 업 시 PC환경에서 확인하기보다 실제 적용대상 기기에서 확인 할 것을 권장한다. 모 바일 폰과 태블릿은 UI의 기본원칙은 동일하나 화면의 해상도 및 레이아웃에서는 차이를 보인다. 현재 태블릿PC의 기준 해상도는 600*1024PX, 768*1024PX, 800*1280PX, 1536*2048PX이다.높기 때문에 디자인 작업 시 PC환경에서 확인하기보다 실제 적용대상 기기에서 확인 할 것을 권장한다. 모 바일 폰과 태블릿은 UI의 기본원칙은 동일하나 화면의 해상도 및 레이아웃에서는 차이를 보인다. 현재 태블릿PC의 기준 해상도는 600*1024PX, 768*1024PX, 800*1280PX, 1536*2048PX이다.
  • 웹 운영체계에 대한 표준
    • 웹 표준 플랫폼은 원활한 리소스관리와 통합된 원칙아래 다양한 웹 서비스를 양산하 기 위해 제공되는 것으로 이를 활용하여 보다 체계화된 웹 서비스를 제공할 수 있다.
  • 모바일 웹 표준 : 스마트 폰 등 다양한 모바일 기기를 통해 웹 정보를 사용할 때 겪게 되는 불편함과 단말기에 따라 웹 콘텐츠를 각각 구축해야 하는 문제를 모바일 웹 표준 화를 통해 해결할 수 있다.

UI 구현 웹 표준 수립

  • 웹 표준이란 웹의 필수 구성요소인 HTML, CSS, Java Script 등에 대해서 w3c 국제표준 문법을 정확히 준수하여 웹 문서가 작성되었음을 의미한다.
  • 웹 표준의 올바른 준수를 위해 HTML 문법 및 CSS 문법에 대한 설계가 반드시 고려되 어야 한다.
  • 웹 표준 준수를 위한 웹페이지(웹문서)의 제작단계는 크게 4가지 과정으로 이루어진다. 웹사이트의 전체적인 골격에 해당하는 콘텐츠구성 단계를 시작으로 문서의 구조화 과 정에 해당하는 마크업 작업과정, 웹페이지의 표현에 해당되는 스타일시트 작업과정, 웹 사이트의 각종 동작(기능)구현에 해당되는 자바스크립트 작업과정으로 나뉜다.

웹 호환성

웹 호환성이란 사용자의 웹브라우저와는 상관없이 웹 콘텐츠가 동등하게 표현되고 웹서비 스가 오류 없이 동작해야함을 말한다. 웹 호환성 확보를 위해서 웹 사이트 내에서의 동작 설계, 레이아웃 설계, 플러그인 호환성 설계가 반드시 고려되어야 한다.

  • 서비스 이용자 단말기의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스 를 제공하여야 한다.
  • 웹페이지의 문법을 선언하고, 선언한 문법을 올바른 방식으로 구현하여야 한다.
  • 웹페이지의 크기, 색채, 배치, 정렬 및 여백 등 시각적 속성은 W3C CSS 2.1 또는 CSS 3 으로 구현하여야 한다.
  • 웹호환성 확보로 크로스브라우징을 지원하여야 한다.
  • 동작 호환성, 레이아웃 호환성, 플러그인 호환성을 확보하여야 한다.

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

TAG
댓글
댓글쓰기 폼