iOS 기본 UI컨트롤 들에 대한 소개 - 1

in #ioswireframe8 years ago (edited)

IT 기획자와 개발자, 그리고 요구사항을 직접 전달하고 싶은 현업 담당자
사용하는 용어도 너무 다르고 같은 단어에 대해 떠올리는 대상도 너무 달라서,
iOS 개발자의 입장에서 화면 구성요소들에 대한 사용법 및 용어를 설명하고자 합니다.

iOS 앱을 보다보면 아래 첨부한 이미지와 같이 생긴 화면의 구성요소들을 볼 수 있습니다.
이들을 흔히 일컬어 UI 라고 부릅니다. (User Interface)
사용자가 프로그램과 상호작용을 하기 위해 프로그램에게 명령을 전달하는 매개체 입니다.

그리고 각 구성요소들을 UI컨트롤 이라고 부릅니다.

Simulator Screen Shot - iPhone 8 Plus - 2018-04-06 at 11.11.57.png

아래 이미지와 같이 화면상에 제일 위에 위치한 두 UI컨트롤들은
사용자로부터 키보드 입력을 받을 때 사용합니다.

이 UI컨트롤을 각각 위에서부터 TextView, TextField 라고 부릅니다.
안드로이드에서는 EditText, 웹에선 Input 박스라고 합니다.

스크린샷 2018-04-06 오전 11.17.15.png

이 UI컨트롤들에 단순히 글을 입력했다고 해도 저장이 되는건 아닙니다.
개발자가 글 입력 시 실시간 저장기능을 구현해야 저장이 되는거죠
이런 기능이 없는 경우 '저장' 버튼이 화면내의 어디엔가 반드시 있어야 합니다.

두 번째로 수치를 변화하거나, 앞에서 입력한 글을 저장할 때, 또는 어떤 상태값 등을 변화하고자 할때 쓰는
UI컨트롤들의 모음입니다.

스크린샷 2018-04-06 오전 11.42.25.png

위에서부터 각각 아래와 같은 명칭이 있습니다.
Segmented Control (TabControl)
Slider
Switch
Button

Segmented Control의 경우 Steemit의 [대세글 | 최신글 | 인기글 | 홍보글] 과 같은
카테고리를 표현하기 위한 UI컨트롤 입니다.
각각의 카테고리에 맞는 정보가 주로 Segmented Control(TabControl)의 하단에 위치하게 됩니다.

스크린샷 2018-04-06 오후 1.00.02.png

다음은 Slider 로 주로 아래와 같이 사용자의 입력을 받아 수치를 변화 할때 사용합니다.
Slider를 사용할 때에는 반드시 수치의 경계( Boundary ) 가 분명해야 합니다.

스크린샷 2018-04-06 오후 12.58.55.png

제일 많이 쓰는 경우는 다음과 같습니다.
-> 플레이어의 볼륨 Up/Down, 영상재생 시점 조절

다음은 Switch 로 이름 그대로
이분법으로만 설명될 수 있는 어떤 행위 / 값을 사용자가 제어할 때 사용합니다.
이때엔 반드시 어떤 행위 / 값이 명료하게 0 또는 1 / 흑 또는 백 으로 구분 지을 수 있을 때 사용합니다.
마치 방에 전등을 크고 끼는 것과 같습니다.

이런 스위치 아닙니다.
stock-photo-bangkok-thailand-october-nintendo-switch-showing-its-screen-with-super-mario-odyssey-744960316.jpg

이런 스위치 맞습니다.
stock-photo-close-up-of-finger-is-turning-on-or-off-on-light-switch-copy-space-376040164.jpg

마지막으로 Button 을 설명하겠습니다.
어떤 동작을 하기 위한 방아쇠 역할을 하는 UI컨트롤 입니다.

stock-photo-red-button-isolated-on-white-d-rendering-with-clipping-path-462754210.jpg

눌렀을 때 다음화면으로 보내기도,
단순히 팝업이 나오기도, 앱이 종료되기도 하는 UI컨트롤로

많은 기획자와 현업 담당자들이 버튼만 누르면 다 되는 줄 알고
PPT로 된 화면기획서, 요구사항정의서에 이 버튼 하나 그려놓고

'이 버튼 클릭 시 마법 같은 일이 일어나야 한다.' 라고 기재들을 해놓습니다.
그래서 개발자 입장에선 버튼 클릭 후 일어나야할 상세 동작 설명이 없으면
가장 민감하게 반응하게 되는 UI컨트롤이기도 합니다.

예) 버튼의 이름이 '저장' 인데 담당자와 미팅 때 이런 경우가 발생하는 경우가 정말 간혹 있습니다.
->
이 버튼 눌렀을 때 앞에서 사용자가 3페이지에 걸쳐서 입력한 내용을 저장하시고,
저장할 120여개의 항목들 중 패턴을 분석해서 틀렸을 법한 내용을 사용자에게 고지하시고,
현재 환율과 현재 주가를 반영하여 회사에 금전적 불이익이 발생할 경우 저장을 막고 오류인척 해주시고,
저장 후에 사용자가 입력한 내용을 유관 부서에 메일로 내용을 요약하여 쏴주시고,
저희 회사는 Byod가 가능해서 모바일 오피스 앱을 통해 유관부서 직원들에게 푸시로 메시지를 쏴주세요
등급은 3단계로 해주시고 위급일 경우 푸시 메시지를 확인할 때까지 사용자의 폰이 진동 모드이더라도
벨소리로 바꿔서 쉴새없이 울리게 해주세요

농담같겠지만, 정말 이런 클라이언트 특히나 고객사 현업 팀장급들 중에서 본적 있습니다.

그래서 꼭!!! 버튼은 기획서 및 요구사항에 상세설명을 기입하시면서
'이게 될까?' 라는 의문을 요청하기전에 한 번씩 품어보셔야 합니다.

1부에선 너무나도 많이 사용하는
우리가 앱 사용하면서 너무나도 많이 봐왔던 UI컨트롤들의 이름과 사용법에 대해서 간략히 다뤄봤습니다.

2부에선 나머지 UI컨트롤들에 대해서 설명하고,
UI컨트롤의 조합에 대해서 다뤄볼 예정입니다.

Sort:  

IOS UI 설명이 엄청 깔끔하네요. 도움 받고 가요~

Congratulations @footcoder! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

You published your First Post
You got a First Vote
You made your First Comment

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Do not miss the last announcement from @steemitboard!

Congratulations @footcoder! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

3 years on Steem - The distribution of commemorative badges has begun!
Happy Birthday! The Steem blockchain is running for 3 years.
Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.05
TRX 0.33
JST 0.080
BTC 63745.71
ETH 1690.28
USDT 1.00
SBD 0.41