티스토리 뷰

UI 제작하기

UI 실제 페이지 제작

UI 구현 표준에 따라서 GUI 디자인 가이드를 기반으로 실제 페이지인 UI를 제작할 수있다.
작성된 체크리스트에 따라서 단위 테스트를 수행하며 실제 페이지인 UI를 제작할 수 있다.

UI 개발 환경 수립

  • 안드로이드 개발 환경 구축
    1. ADK 설치
    2. JDK 설치
    3. 이클립스 내 안드로이드 SDK 설치
    4. HTML5 및 CSS3
    5. Javascript

HTML5

웹 표준 기관인 월드와이드웹 컨소시엄(W3C)의 차세대 웹 언어 규격인 HTML5는 현재 글 로벌 웹 표준 기술로 자리 잡았다. HTML5는 문서 작성 중심으로 구성된 기존 표준에 그 림, 동영상, 음악 등을 실행하는 기능까지 포함시켰다. HTML5를 이용해 UI를 구현하면 만 들면 국내 전자상거래에서 많이 쓰이는 액티브X, 동영상이나 음악재생에 플요한 어도비 플래시와 같은 플러그인 기반의 각종 프로그램을 별도로 설치할 필요가 없어진다. HTML5 는 모바일환경에서 iOS이나 안드로이드 등의 운영체제를 가리지 않고 모두 호환되며 높은 보안성도 HTML5 강점이다.

  • DOCTYPE 선언
  • 캐릭터 인코딩 선언 (character encoding)
  • HTML5 기본 구조
  • HTML Canvas : 자바스크립트를 이용해 선을 긋거나 원 등의 이미지를 그릴 수 있다.
  • HTML SVG
    • SVG는 ‘Scalable Vector Graphics’의 줄임말로 웹 상에서 2차원 벡터 그래픽을 표현하 기 위한 XML파일 형식의 마크업 언어이다. 별도의 플러그인이나 뷰어 없이도 그래프, 차 트와 같은 작고 간단한 그래픽 요소부터 애니메이션화된 일러스트와 같이 화려하고 복잡 한 요소에 이르기까지 이미지의 왜곡이나 손상 없이 고화질의 UI 그래픽 효과를 웹 상에 서 구현할 수 있다는 장점이 있다.

CSS3.0 기본 기능

  • 둥근 모서리 : 이미지를 사용하지 않고, 둥근 모서리 또는 테두리와 버튼을 생성할 수 있다. 둥근 사각형 (Rounded Rectangle): border-radius 속성 값의 비율로 모서리에 곡선 을 적용 할 수 있다.
  • 그라데이션(Gradients) : 배경색상을 변경할 때 사용할 수 있다. linear (선형 gradient) 와 radial(원형 gradient) 두 가지로 나눌 수 있다.
  • CSS3 RGB 색상과 투명도(opacity) UI 구현
  • 텍스트 그림자 효과 UI 구현
  • CSS3 전환효과 (Transitions) : 이미지에 전환 효과를 적용한 UI 구현
  • CSS3 애니메이션효과 : 이미지에 움직이는 효과를 적용한 UI 구현
  • CSS3 그라데이션 효과 UI 구현

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

댓글
댓글쓰기 폼