Report_032. 코딩(Cording) : iOS / 디자이너가 Xcode 프로그램으로 해보는 코딩

디자이너가 배우는 iOS 

디자이너가 Xcode 프로그램으로 해보는 코딩

[목차]

1. 오토레이아웃 : 제약사항과 point

2. 개발자 툴로 프로토타이핑 해보기 : Xcode-story board

3. 디자인 의도에 따른 가이드 제시 방법

4. 유용한 오픈 ui 라이브러리를 찾아보는 방법

1. 오토레이아웃 : 제약사항과 point

Auto Layout 이란?

'Auto' 라는 뜻은, 자동적으로 다 해줄게 너는 아무것도 할 필요가 없다 라는 뜻이 아니라, 오브젝트들의 사이즈나 위치를 자동으로 계산해준다는 것을 뜻한다.

하지만 어떤한 '제약 사항'은 따르는 선에서 자동으로 계산해준다는 것이다. 즉, 디자이너인 우리가 '조건'을 준다는 것이다.

이러한 Auto Layout이 필요한 이유는 뭘까?

우리가 하는 UI디자인이 어느 기기에서 실행되던 디자이너가 의도한 디자인이 구현되도록 하기 위함이다.

즉, 아이폰7 사이즈로 디자인 한 화면이 아이폰5 사이즈로 가도 아이폰7에서 디자이너가 의도한 화면 디자인이 그대로 나와야 한다는 것이다. 이 Auto Layout 기능이, 그것을 가능하게 도와 줄 것이다.

"X- Code" 프로그램을 이용해 Auto Layout을 실습해 보았다.

실습을 위해 몇몇 용어들을 익힐 필요가 있다.

1. Constraint : 각 뷰의 거리, 길이, 위치 등을 표현하기 위한 "제약"

2. View Boundary 

a. - Leading : 화면 상 맨 앞쪽

b. - Trailing : 화면 상 맨 뒷쪽

c. - Top : 화면상 맨 위쪽

d. - Bottom : 화면상 맨 아래쪽

화면 배치를 시작하기 전, 내가 만들고자 하는 화면의 "기준"이 되는 "뷰"를 잡고 시작하는 것이 좋다.

"상대적"으로 표현되는 것이 있기 때문에, 기준이 되는 것을 잡고 화면 배치에 들어갈 필요가 있는 것이다.

이때 어떠한 이유로 "기준이 되는 뷰"를 잡게 되는 걸까?

이는 디자이너 마다 다르다. 어떤 디자이너는 status bar를 잡고 할 수도 있고, 어떤 디자이너는 Tool bar를 잡고 할 수도 있다. 하지만 이럴 경우, 한 화면에 같은 비중의 콘텐츠들이 나열될 경우 그 구성이 애매해 질 수 있다.

*Status bar : 상황들에 따라서 높이가 가변적으로 바뀔 수 있다. 즉, 기기에 따라서 혹은 업데이트 유무에 따라서 바의 높이가 달라질 수 있다는 것. 현재는 20pt로 높이는 같다. 

한가지 팁은, 화면을 구상할 때, 그 화면의 가장 중요하다고 생각되는 콘텐츠를 중심으로 잡고 화면구성 한다면 좋다는 것이다.

여기서 "상대적 좌표"와 "절대적 좌표"에 대한 개념을 적립하고 갈 필요가 있다. 

대부분의 화면에서는 "상대적 좌표"를 사용한다. 기준이 되는 "뷰"를 하나 잡고 나머지 컨텐츠들을 "상대적 좌표"에 따라 배치하면 되기 때문이다. 

하지만 "절대 좌표"를 사용해야 하는 경우도 있을 것이다. 경우에 따라서 절대 좌표를 사용해야 한다면, 그때만 절대 좌표를 정해서 주면 된다.

제약사항(Contraint)

제약 사항은 자신의 의도에 따라 천차만별이 될 수 있다.

 

화면 배치를 할 때, 꼭 생각해야 하는 4가지가 있다.

a. X좌표 값

b. Y좌표 값

c. 넓이 (가로 값)

d. 높이 (세로 값)

X-Code 프로그램에서는 'UI' 적인것은 물론이고 'UX'적인 것도 설계해 볼 수 있다.

즉, 어플리케이션 화면에서 반응하는 '슬라이스', '스와이프', '확대, 축소' 기능들을 생각하며 설계할 수 있다는 것이다. 

본격적인 실습에 들어가보자.

먼저, 제일 처음에 창을 만들고 기본적인 앱의 구성 요소들을 올려본 후 구동시키는 것 까지 해보겠다.

1. Xcode를 열고 Main storyboard에 들어간 모습이다.

오른쪽 아래에서 "View Controller"를 끌어다가 화면에 놓는다. 

그 후, "View"를 "View Controller"위에 끌어다 놓는다.

여기서 "View"는 아무것도 없는 사각 도형같은 존재이다.

우리는 이것을 "멍텅구리 화면"이라고 명명하기도 한다.

또한 포토샵이나 일러스트의 레이어 개념과 같이, 

"View Controller"가 부모 레이어가 되고,

그 위에 올려다 놓은 "View"는 자식 레이어가 된다. 

2. 내가 구성한 화면을 "Preview" 기능을 통해 바로 실행시켜 볼 수 있다.

여기서, 내 아이폰으로 가져와 테스트 구동 시켜볼 수는 없을까 궁금해하는 사람도 있는데,

관리자 승인을 받아야만 볼 수 있다고 한다.

오른쪽 상단에 동그라미 두개가 겹쳐져 있는 아이콘을 선택한 후

-> 중간 status bar에서 "Preview" 선택 후 -> "Main.storyboard (Preview)" 를 선택한다.

-> 이후에 왼쪽 상단에 플레이 모양 아이콘을 누르면 구동되는 것을 볼 수 있다.

4. 이미 구동되고 있던 Preview화면이 있다면 다음과 같은 알림창이 뜨는데,

그냥 stop 누르고 구동시켜주면 된다.

5. 내가 디자인한 화면이 "Preview" 기능을 통해 구동된 화면이다.

처음에 화면을 열고 연습할 멍텅구리 view 화면을 얹어본 후, Preview를 통해 구동까지 시켜보았다.

이제 정말 중요한 "Auto layout menu"에 대해 알아보자.

실습에 들어가기 전, 사용할 메뉴들에 대해 알아야 한다.

★★★★★

"Auto layout menu"

총 5가지의 종류가 있는데, 화면의 우측 하단부에 위치한다.

생김새는 이러하다.

1. Update Frame/ 2. Embed in Stack/ 3. Align/ 4. Add New Constraints/ 5. Resolve Auto Layout Issues

각각의 기능을 사진의 순서대로 살펴보면,

1. Update Frames : 선택된 뷰(들)을 제약사항에 맞게 프레임을 변경하는 툴이다.

2. Embed in Stack : 해당 객체들을 하나의 스택 뷰로 변환하는 툴이다.

3. Align : 객체 정렬에 관한 제약사항을 추가하는 툴이다. 

4. Add New Constraints : 객체의 크기 및 객체 간 거리에 관한 제약사항을 추가하는 툴이다.

5. Resolve Issues : IB 구성 중 발견된 오토레이아웃 관련 문제를 해결하는 툴이다. 

"Pin Menu"

순서대로 기능을 살펴보자

1. 인접 객체와의 고정거리 제약

2. Width / Height : 가로, 세로 크기 

3. Equal Widths / Equal Heights : 다른 객체와의 크기 비율 제약

4. Aspect Ratio : 가로, 세로 비율 제약

5. Align : 다른 객체와의 정렬

** pt : 모든 단위는 포인트!!!!

"Resolve Auto Layout Issues Menu"

* 설정한 제약사항에 따라 프레임 (자동)수정

* 현재 화면의 프레임에 따라 제약사항 (자동)수정 

* 부족한 제약사항 (자동)추가

* IB가 제안하는 제약사항으로 제약사항 초기화 (자동) 

* 제약사항 모두 삭제

*** Update Frames, Clear Constraints 외에는 사용 자제

이 메뉴는 주로 "Clear Constraints" 기능을 쓸 때 이용했는데, 

'기준 뷰'를 기준으로 걸어놓았던 수식들이 틀렸을 때, 이전 단계로 돌아가는 용으로 많이 사용하였다.

위에서 살펴본 메뉴들을 이용하여 "기준 뷰"를 잡고, 그에 맞춰 화면을 배치해보는 실습을 해보자.

1. 새로운 화면을 연다. 이때 '화살표'를 끌어당겨 해당 화면에 붙여 놓아야 한다.

그 이유는 Preview를 해볼 때, 이 화살표가 붙어있는 화면이 처음 시작되는 화면으로 시작되기 때문이다.

2. 테스트용 멍텅구리 화면 "View"를 얹는다. 

3. "Add New Constraints" 메뉴를 열고 

4. "Width", "Height"를 선택 후 "Add 2 Constrains"를 선택해 완료해 준다.

5. 선택 완료를 했는데도, '빨간 테두리'가 떠있다는것은 뭔가 잘못되었다는 것을 뜻한다.

이 경우, 'Width', 'Height'가 지정된 것은 잘 했는데, 동시에 이루어져야 할 좌표값은 입력되지 않았으니

빨리 내 좌표값을 입력해줘!! 하고 징징대는 표시인 것이다.

위에서 말했다 시피, x,y의 좌표값과 width, height는 반드시 선택되어야 빨간색도 안뜨고 

제대로 완료 되었다는 것을 뜻한다.

5. 빨간 선을 띄우며 징징거리는 이 아이를 진정시키기 위해

좌표값을 서둘러 설정해본다.

"Add New Alignment Constraints" 메뉴에서 맨 아래 두개인

 "Herizontally in Container"와 "Vertically in Container"를 선택해 준다.

6. 가운데 정렬을 위해 "Add New Contrains" 메뉴에서 맨 위에서 부터 

얼마만틈 떨어질 것이냐를 정해줌으로 가운데정렬을 해준다.

7. 완료가 된 상태이다.

선택했을 때 빨간색 선이 하나도 안뜬다. 이를 통해 오류가 없음을 확인할 수 있다.

7-1. 만약 위 사진과 같이 모든 설정을 마친 후 선택했을 때,

노란색 점선이나 실선같은것이 뒤에 깔린다면, 

내가 준 설정값대로 뷰가 들어가 있지 않은 상태라는 것을 알려주고 있는 것이다.

이럴 때에는, Auto layout menu의 첫번째 아이콘인,

Update Frames : 선택된 뷰(들)을 제약사항에 맞게 프레임을 변경하는 툴을

선택만 해주면 알아서 해당 위치로 도형이 이동한다. 

이번에는 '멍텅구리 View'를 Status bar에 딱 붙여보자.

1. 멍텅구리 view를 원하는 위치에 놓고 "Herizontally in Container"를 체크하여 준다.

이로서 x축의 좌표값을 준 것이 된다.

2. 좌표값을 주었으니 이제는 Width 와 Height 값을 줄 차례이다.

두 값을 체크해주고 원하는 숫자를 넣는다.

여기서 잊지 말아야 할 것은, "Add New Constraints"의 상위 값을 "0"으로 지정해줘야 한다는 것이다.

그래야 status bar에 딱 붙게 view를 설정할 수 있다.

3. 위와 같은 과정을 통해 완성 된 화면이다. 

status bar에 딱 맞게 붙어있는 view의 모습을 볼 수 있다.

view를 클릭했을 때 보여지는 안내선에도 빨간 선은 없다.

오류 없이 모든 값이 잘 들어갔다는 것을 의미한다.

status bar에 view를 붙이고 싶을때 핵심으로 기억해야 할 것은

"Add New Constraints" 메뉴를 열고 상단 값은 '0'으로 맞추면 된다는 것이다.

아이폰7 화면에서 화면배치를 한다고 했을 때, 아이폰7은 375*667로 인터페이스 값이 정해져있다.

때문에 375*667이라는 화면에서 "상대적인" 개념을 이용하여 view의 치수를 정해줄 수 있다. 

1. "Equal Widths" 와 "Equal Heights"라는 메뉴를 선택해준다.

2. "Center Vertically in Container"을 선택하여 값을 입력하고

3. 마찬가지로 "Center Horizentally in Container"을 선택 후 원하는 값을 입력해주면 된다.

4. 이 기능들을 이용해 작은 크기로 가져왔던 View를 아이폰7 크기의 인터페이스에 딱맞게 

수치를 조정해 볼 수 있다. 

* "상대적 개념"을 이용한 view의 사이즈 조정을 여러가지로 해 보았다.

Auto layout menu를 통해 아래와 같은 화면은 1분이면 완성할 수 있다.

모든 컨텐츠들을 화면에 넣고 화면배치를 끝냈다. 

아이폰7의 인터페이스 사이즈 375*667 안에서, 기준이 되는 "기준 뷰"(마젠타색 정사각형) 를 잡고 그것을 중심으로 

Text 와 Text View를 위치했다. 

화면에 들어간 모든 요소들을 선택해 보았을 때, 안내선에 빨간색은 없다.

모든 좌표와 수치가 알맞게 들어간 것임을 확인할 수 있다. 

Xcode로 간단한 Prototyping을 만들 수 있다.

실제로 Xcode를 활용하여 Prototyping하는 디자이너는 거의 없다고 보면 된다.

할 줄 모르기 때문이다. 하지만 Xcode로 Prototyping을 한다면, 개발자들이 그 디자이너를 다시 볼 것이다.

또한 개발자와 디자이너가 서로 소통하기가 훨씬 용이해짐으로, 디자이너로서 자신의 업무 스킬 및 가치를 

높일 수 있을 것이다.

아래 사진처럼, Xcode로 Prototyping 한다면, 여러가지 View Controller를 깔아놓고 원하는 화면 flow대로

디자인한 다음 각 화면들끼리 이어주면 된다.

간단한 실습을 해보자.

페이지 flow를 보기 위해서 view에 색상을 깔았다.

그린색 페이지 다음 마젠타색 페이지로 넘길 것이다.

1. 원하는 화면을 구성한 후,

2. 메뉴바에서 Editor -> Embed in -> Tab Bar Controller 를 클릭해 준다.

** 여기서 중요한 점!!

어떤 화면으로 Prototyping을 구성할 것인지에 따라 들어가는 경로가 다르다!!!

크게 4가지로 나눠본다면,

1. 네비게이션 화면을 구성하려면...

Editor -> Embed in -> Navigation Controller

2. 탭바 화면을 구성하려면...

Editor -> Embed in -> Tabbar Controller

3. 네비게이션으로 화면 이동

Show / pop / pop to root

4. 모달로 화면 이동

Present modally / dismiss

3. 왼쪽 레이어 리스트에 "Tab Bar Controller"가 생성된 것을 확인할 수 있다.

4. 화면이 변환되는 방식도 여러가지로 바꿔볼 수 있다.

해당 버튼을 눌렀을 때 어떤식으로 화면 전환 효과가 들어가는지는 "State Config"메뉴에서 바꿔볼 수 있다.

5. 전체적인 화면구성을 끝냈다.

6. 만약, "Tab bar"의 모양이 마음에 안든다면 바꿀 수도 있다.

지금은 직사각형의 모습인데, 왼쪽 레이어리스트에서 "View Controller" -> "View -> Button을 누르고

모양을 바꿔줄 수 있다.

7. 화면이 완성되었다. "Preview"를 통해 play 해보자. 

8. play할 수 있는 작업을 마쳤다는 의미의 "Build Succeeded"라는 메시지가 나온다.

망치모양이 내가 지금 실습하고 있는 Xcode 화면이고,

그 옆에 스마트폰 모양이 Simulator 되는 화면이다.

따로 분리되어 나타나진다.

9. "Preview" 화면이 이처럼 크게 나온다면,

Command+3 혹은 Command+4, Command+5로 크기를 조정할 수 있다.

9. 화면 크기를 보기 좋게 맞추고 "Preview" 를 해보았다.

*Preview 해본 영상

** Xcode를 이용해 개발자와 함께 일할 때 디자이너가 알아두어야 할 용어들에 대해 정리해 보았다.

[용어]

1. 네비게이션

계층따라 가는 화면들을 말한다. 한 단계 지나서 또 정보들이 나타나는 형식을 네비게이션 플로우라고 한다.

즉, "네비게이션으로 푸쉬해달라" 라는 말의 뜻은 -> "네비게이션 식으로 넘겨달라" 라는 뜻이다.

2. pop

"그 전 단계로 가주세요" 라는 뜻이다.

3. 프레젠트 해주세요 

"임시창 띄워주세요" 라는 뜻이다. —> 프레젠트 모달리(present Modally) 라고도 표현한다.

4. dismiss 

"임시창 닫아주세요" 라는 뜻이다.

5. Segway (세그웨이)

"UX의 연결흐름"을 말한다.  segway(세그웨이)라고 한다.

[Xcode로 만드는  Prototyping]

1. Xcode로 프로토타입 만들 수 있다. 하지만 제약은 있다. 코드도 해줘야 하고 하는.. 하지만 해볼만은 하다.

2. asset을  Xcode로 끌어올 수도 있다.  —> image view 실행시켜서 image에 내 asset을 끌어들여라

3. 개발자와 디자이너는 화면을 보는 시각부터 차이가 있다.

"테이블 뷰", "리스트 뷰" 가 있는 화면들 —> 디자이너들은 텍스트나 이미지간 간격으로 화면 구성과 배치를 생각한다.

하지만! 개발자들은 셀단위로 생각한다.

"컬렉션 뷰"도 마찬가지이다. 디자이너들은 status bar에서부터의 x,y 좌표를 잡아서 주는데, 이렇게 주면 개발자들이 또 두번일 해야 한다. 

그냥 그 셀 안에서의 콘텐츠끼리의 상대적인 거리를 계산해 주면 된다. 

즉. 컨테이너로 삼을 뷰가 있다면 그거 기준으로 다 계산해주면 편한다.

4. Q. 그렇다면 그 기준이 되는 컨테이너로 삼을 뷰는 어떻게 계산해서 화면에 배치하나요?

A. "컨테이너 뷰"는 "부모 뷰"에 대해 상대적인 개념으로 수치를 잡고 화면에 나타내주면 된다.

[Open Custom UI 사이트들] _ 프로그래머들이 찾아보는 사이트들이다.

<<https://www.cocoacontrols.com/>>

: 이 사이트에서 MIT License라고 적혀져잇는건 막 써도 된다는 뜻

커스텀 ui, ux 들 많이 볼 수 있다.

인스타그램, 페이스북 따라해보기 해서 흉내내본 것들이 많다.

iOS, MAX 용 많다.

<<https://cocoapods.org>>

이런 사이트에서 레퍼런스 찾아서 개발자에게 주는 디자이너가 생각외로 진짜 없다. 

*카멜레온 킷 —> 색상맞춰놓은 킷 같은것들이 있다. 개발자들은 이런거 가져다가 막 쓴다.

지금까지 디자이너가 Xcode로 배워보는 iOS 코딩에 대한 글이었다.

Xcode라는 프로그램은 인터페이스에 view들로 디자인 작업을 할 수도 있고 코딩값도 넣을 수 있다.

때문에 개발자들이 쉽게 디자인해보기 위해 이 프로그램을 쓰기도 한다고 한다.

개발자들도 다루는 디자인툴이니, 디자이너들도 개발자와의 원활한 커뮤니케이션을 위해 익히는 것이 좋겠다.