티스토리 뷰

프로그래밍 계획 수립하기

UI/UX 표준 화면 구현

공통 모듈, API를 구현하고 UI/UX 표준 및 지침을 이용한 화면/폼을 개발하여 연동할 수 있다.

사용자 인터페이스(UI, User Interface)

사용자 인터페이스는 앱을 구성하는데 있어서 아주 중요한 컴포넌트이다. 사용자가 애플 리케이션을 쉽게 사용하게 하려면 사용자에게 그래픽 기반의 사용자 친화적인 인터페이스 를 제공해야 한다. 잘 구성된 인터페이스의 경우에는 사용자가 앱의 고유 목적에 맞게 잘 사용할 수 있게 해주는 효과도 있게 한다. 사용자 인터페이스 요소들은 크게 ‘뷰(view)’와 ‘뷰그룹(viewgroup)’으로 구분된다. 여 기에 추가적으로 사용자 인터페이스 화면을 가지면서 특정한 작업을 담당하는 컴포넌트인 ‘액티비티(activity)’가 있다.

뷰(view)

뷰는 사용자 인터페이스(UI)를 구성하는 기초이자 핵심 컴포넌트로서, 화면상의 사각 영역 을 차지하며 자신의 모양을 그리고 사용자로부터의 입력을 받아들인다. 뷰는 크게 ‘위 젯’과 ‘뷰그룹’으로 분류된다.

  • 위젯(widget)
    • 위젯은 컨트롤 또는 뷰의 또 다른 명칭으로 불리며 직접적으로 보이며 사용자 인터페이스 를 구성한다. 버튼, 텍스트 뷰, 에디트, 라디오 버튼 등이 위젯이며, 흔히 컨트롤이라고도 한다.
  • 뷰그룹(viewgroup)
    • 직접적으로 보이지 않으며, 다른 뷰를 담는 컨테이너 역할을 한다. 이름 그대로 여러 개의 뷰를 유기적으로 모아 놓은 것이다. 이 부류의 클래스들을 레이아웃(layout)이라고 하며 선 형 레이아웃, 테이블 레이아웃, 상대 레이아웃 등이 여기에 속한다.
마진(margin)과 패딩(padding)

마진(margin)은 컨테이너와 뷰와의 간격을 의미한다. 예를 들어 컨테이너 안에 있는 버튼 과 테두리와의 간격을 의미한다. 패딩(padding)은 뷰와 콘텐츠와의 간격이다. 예를 들어 버 튼의 문자열과 버튼 테두리와의 간격을 패딩이라고 말하며 패딩을 통해 조절이 가능하다. 뷰 입장에서 바라볼 때 마진은 바깥쪽 여백을 의미하고 패딩은 안쪽 여백을 의미한다. 패 딩은 뷰의 내부이므로 크기에 포함되지만 마진은 그렇지 않다는 점에서 다르다.

레이아웃(layout)

레이아웃은 뷰그룹(viewgroup)으로부터 파생되는 클래스들로서 뷰들의 위치와 크기를 결정 하고 다른 뷰(view)들을 포함하는 뷰의 컨테이너이다. 버튼, 에디트, 텍스트 같은 기본 위 젯들이 일정한 규칙에 따라 모여서 하나의 레이아웃을 구성하고 레이아웃 여러 개가 모여 하나의 액티비티 화면을 완성한다.

  • 선형 레이아웃(linear layout)
    • 간단하고 직관적으로 이해하기 쉬워서 가장 많이 사용되는 구조로 컴포넌트인 자식 뷰를 일렬로 수평 또는 수직으로 배치하는 레이아웃이다.
  • 테이블 레이아웃(table layout)
    • 자식 뷰들을 테이블 형태로 배치하는 레이아웃이다. 가로줄과 세로줄이 그어져서 생성되 는 여러 셀들로 구성된 바둑판 모양으로 생각하면 된다. 하나의 테이블은 행을 의미하는 여러 개의 테이블 로우(table row) 객체로 구성되고 이 테이블 로우 안에는 여러 개의 열 이배치되어셀이형성된다. 각셀안에는하나의씩의자식뷰가들어간다.
  • 그리드 레이아웃(grid layout)
    • 그리드 레이아웃에서 ‘Grid’는 격자, 눈금을 의미한다. 즉, 바둑판 형식의 레이아웃이라고 생각하면 될 것이다. 그리드 레이아웃은 TableLayout과 그 형태가 비슷하며 API14 레벨부터 추가된 레이아웃으로 메모리 효율이 좋고 처리가 빨라서 사용을 적극 권장하는 레이아웃이 다. 하지만 계산기 같이 표로 구성되는 경우 외에는 잘 사용하지 않는 레이아웃이다.
  • 상대 레이아웃(relative layout)
    • 상대 레이아웃은 누구 밑에 누구, 누구 옆에 누구 식으로 서로 간의 관계(relation)를 지정 하는 레이아웃이다. 위젯과 상위 위젯과의 위치 관계 또는 위젯끼리의 관계를 지정함으로 써 뷰를 배치하는 레이아웃이다
  • 절대 레이아웃(absolute layout)
    • 의미적으로 상대 레이아웃의 반대 속성을 가지며, 관계나 순서에 상관없이 지정한 절대 좌표에 뷰를 배치하는 레이아웃이다.
  • 프레임 레이아웃(frame layout)
    • 프레임 레이아웃은 형태상으로 모든 레이아웃 중에 가장 단순하다. 즉, 여러 자식 뷰들이 순차적으로 겹쳐서 배치되는 구조이다. 자식 뷰를 배치하는 규칙이 별도로 없고, 프레임 레이아웃 안에서 자식 뷰들은 등장하는 순서대로 화면에 표시되며 모든 자식 뷰들의 표시 기준점은 프레임의 좌측 상단이 된다. 자식 뷰가 2개 이상일 때에는 추가된 순서대로 겹 쳐서 표시된다. 먼저 추가된 자식 뷰가 아래쪽에 배치되고 나중에 추가된 자식 뷰가 위쪽 에 겹쳐진다.
버튼

입력을 위한 위젯(widget) 가운데 가장 기본적인 컴포넌트는 ‘버튼(button)’이다. 버튼은 사용자가 터치하면 특정 동작이 일어나도록 하는 텍스트나 아이콘으로 이루어져 있다. 이 로 인해 버튼은 텍스트 버튼과 이미지 버튼으로 구분할 수 있다. 이미지 버튼은 일반 텍 스트 버튼 대용으로 사용할 수 있는 버튼인데 이미지를 표시할 수 있는 것이 아니라 이미 지인데 클릭이 가능한 버튼인 것이다.

버튼은 단순히 겉면을 클릭하여 입력을 받는 데 비해 컴파운드 버튼(compound button)은 체크, 언 체크의 두 가지 상태를 통해 입력을 받는다. 라디오 버튼은 선택 가능한 여러 개 의 값 중 하나를 입력받을 때 사용한다. 토글 버튼(toggle button)은 두 값 중에서 하나의 값을 선택한다는 면에서 기능상 체크 버튼과 동일하다. 다만 모양이 좀 색다르고 체크 상 태와 언 체크 상태를 명시적으로 문자열로 분명히 표시할 수 있다는 점이 다르다.

UI/UX Design

UI/UX 환경 분석

UI/UX 계획 수립

사용자 리서치

UI/UX 요구 분석

UI/UX 콘셉트 기획

UI 아키텍쳐 설계

댓글
댓글쓰기 폼