라이징캠프_iOS_9기_1주차_개발일지_2

신태원·2022년 8월 11일
0

RC_iOS_9

목록 보기
2/8
post-thumbnail

과제 2번 2️⃣

스토리보드 컴포넌트 전부 조사 및 AutoLayout 개념 조사 😱

스토리보드 컴포넌트

  • 우측 상단의 + 버튼을 누르면 위 화면처럼 Component를 골라 추가할 수 있는 화면이 뜬다
    - 이때 단축키는 Command + Shift + L

  • 개수가 좀 많아서 그나마 비슷해보이는 컴포넌트들끼리 묶어서 정리를 해봤다.

Component_1

  • Label

    임의의 텍스트를 포함하고 있는 오브젝트
    -> 사용자가 설정한 Label의 크기에 따라 텍스트가 축소, 줄 바꿈 혹은 잘릴 수도 있다.
    -> Label에 있는 텍스트의 글꼴, 생상, 정렬, 강조표시 및 그림자를 제어할 수 있음.

  • Button

    눌렀을 때 액션을 취하는 제어 오브젝트
    -> 제목, 부제, 이미지 및 기타 모양 속성을 가질 수 있는 일반 스타일의 버튼

  • Gray, Tinted, Filled Button

    눌렀을 때 액션을 취하는 제어 오브젝트
    -> 제목, 부제, 이미지 및 기타 모양 속성을 가질 수 있는 (회색, 색칠된, 채워진 느낌의) 스타일의 버튼

  • Pull Down Button

    pull down 메뉴를 보여주는 오브젝트
    -> 취할 수 있는 액션들이 담긴 목록의 버튼들을 나타낸다.
    -> 버튼의 동작(action)과 직접 관련된 항목들을 표시함.

  • Pop Up Button

    pop up 메뉴를 보여주는 오브젝트
    -> 클릭했을 때 서로 상호배타적인 액션들의 목록을 보여준다.(서로 연관이 없는 목록 혹은 액션. ex. 이름순, 날짜순 등)
    -> 클릭된 액션은 Pop UP Button의 타이틀로 설정된다.

  • Segmented Control

    수평(가로)의 버튼 목록들을 나타내는 제어 오브젝트
    -> 단일 또는 여러개의 선택이나 명령 목록을 나타낸다.
    -> 텍스트 또는 이미지를 표시할 수 있지만, 동시에 텍스트와 이미지 둘 다 표시할 수는 없다.

  • Text Field

    텍스트를 편집할 수 있는 텍스트 오브젝트
    -> 편집 가능한 텍스트를 포함할 수 있는 둥근 사각형을 표시
    -> 사용자가 Text Field를 Tab하면 키보드가 나타남.
    -> 사용자가 키보드에서 Return을 Tab하면 키보드가 사라지고 Text Field가 입력으로 처리함.

  • Slider

    일정 범위내에서 어떠한 값을 고를 수 있는 슬라이드 오브젝트
    -> 값 범위를 나타내는 track 이라는 가로 막대를 표시함
    -> 현재 값은 표시기(사용자 정의 가능)로 표시되며 사용자는 track을 따라 직접 손가락으로 값을 선택할 수 있음

  • Switch

    on 과 off의 상태를 나타내는 스위치 오브젝트
    -> 주어진 값의 Boolean(on or off)상태를 사용자에게 보여줌
    -> Tab 방식으로 상태를 전환할 수 있음.

  • Activity Indicator View

    작업이 진행될 때 회전하며 나타나는 오브젝트
    -> 완료율을 알 수 없는 작업의 처리를 나타낼때 사용(ex.로딩화면)

  • Progress View

    진행율을 나타내는 막대 오브젝트
    -> 꽤 긴 작업이 진행중임을 나타내며 현재 작업의 진행율을 나타냄

  • Page Control

    페이지 목록을 점으로 표시해주는 오브젝트
    -> 응용 프로그램에서 열려있는 페이지를 점으로 표시함
    -> 현재 보고 있는 페이지에 해당하는 점에 강조 표시가됨
    -> 강조 표시가 된 점의 오른쪽 혹은 왼쪽을 Tab하는 방식으로 event를 생성할 수 있음(ex. 페이지 이동)

  • Stepper

    특정 값의 증가 또는 감소를 하는 오브젝트
    -> 증가되는 값을 표시하기 위해 보통 Text Field 또는 Label과 결합되어 사용됨.

Component_2

  • Horizontal, Vertical Stack View

    View를 선형으로(수평 or 수직)으로 정렬해주는 인터페이스 view 오브젝트
    -> View의 수평 또는 수직 Stack을 생성하는 데 필요한 제약 조건(?)을 생성하고 관리
    -> 사용자 정의를 통해 주변 레이아웃에 반응하고 영향을 줄 수 있음

  • Table View

    data를 테이블형태의 리스트로 표현해주는 오브젝트
    -> 스크롤 가능한 목록을 표시하기 위해 DataSource & Delegate 프로토콜을 이용하는 패턴을 사용
    -> Table View의 각 행(목록)은 UITableViewCell의 개체임
    -> 사용자는 Table Cell을 삽입, 삭제 및 재정렬하여 Table을 편집할 수 있음

  • Table View Cell

    Table view의 단일 행을 보여주는 오브젝트
    -> Table view에서의 cell의 속성과 동작을 설정 및 정의
    -> 정확히 어떤건지는 추후에 써봐야 알듯..

  • Image View

    이미지를 표시하는 view 오브젝트
    -> 하나의 이미지 혹은 여러개의 이미지를 애니메이션으로 표시

  • Collection View

    테이블처럼 일정한 가로 세루 개수를 가진 목록 오브젝트
    -> Table View에 비해 데이터 나열이 자유롭기 때문에 많은 아이템을 보여주는 상황에서 사용
    -> Table View와 동일하게 DataSource & Delegate 프로토콜을 이용하는 패턴을 사용

  • Collection View Cell

    Collection View에서 한개의 cell을 나타내는 view 오브젝트
    -> Label 및 Image View와 같은 뷰로 채워 제공

  • Collection Reusable View

    캐싱 동작을 구현하는 오브젝트
    -> 머리글 또는 바닥글과 같이 Collection View에서 재사용 가능한 View의 속성과 동작을 정의

  • Text View

    여러줄의 텍스트 라인을 편집하는 오브젝트
    -> 사용자가 text view를 Tap하면 키보드가 나타나고 키보드에서 Return을 누르면 키보드가 사라지고 입력으로 처리됨
    -> Text View의 모든 텍스트에 적용되는 글꼴, 색상 및 정렬과 같은 속성은 사용자 지정 설정 가능

  • Scroll View

    스크롤 가능한 영역을 정하는 오브젝트
    -> 애플리케이션 창의 크기보다 큰 컨텐츠를 표시하는 메커니즘을 제공
    -> 사용자가 Swipe 하는 방식으로 해당 컨텐츠내에서 스트롤할 수 있도록 함

  • Date Picker

    날짜와 시간을 선택하게 해주는 오브젝트
    -> 사용자가 날짜와 시간을 선택할 수 있도록 여러개의 회전 휠을 사용하는 개체를 제공

  • Picker View

    행과 구성요소로 구성된 회전휠을 제공하는 오브젝트
    -> 구성 요소의 각 행에는 문자열 또는 이미지같은 view 오브젝트가 있음

Component_3

  • Visual Effect View with Blur

    흐린 배경을 제공하는 오브젝트
    -> 사용자 설정이 가능한 혼합 효과를 이 Visual Effect View with Blur 뒤에 있는 View에게 제공(모자이크..? 같은 느낌)

  • Visual Effect View with Blur and Vibrancy

    흐린 배경과 생동감있는 효과를 제공하는 오브젝트
    -> 흐린 배경을 제공하고 생동감 있는 효과로 뒤에 있는 View를 렌더링함. (DSLR 필터같은 효과가 아닐까.. 주변은 흐리게하고 중앙은 뚜렷하게 해주는..)

  • Map Kit View

    Map 컨텐츠를 보여주는 오브젝트
    -> 지도 애플리케이션에서 제공하는 것과 유사한 Map 인터페이스를 제공
    -> 이 클래스를 있는 그대로 사용하여 지도 정보를 표시하고 애플리케이션에서 지도 컨텐츠를 조작함

  • MatalKit View

    Metal로 렌더링된 그래픽을 제공해주는 오브젝트
    -> 3D 모델링, 금속 도면 응용 프로그램 제작에 있어 필요한 노력을 단순화시켜줌

  • GLkit View

    OpenGL ES로 렌더링된 그래픽을 제공해주는 오브젝트
    -> OpenGL ES 응용 프로그램 제작에 있어 필요한 노력을 단순화시켜줌

  • SceneKit View

    SceneKit로 렌더링된 그래픽을 제공해주는 오브젝트
    -> SceneKit 프레임워크를 사용하여 3D 장면을 표시
    -> 이를 통해 애플리케이션에서 3D 장면을 쉽게 로드, 조작 및 렌더링할 수 있음.

  • SpriteKit View

    SpriteKit로 렌더링된 그래픽을 제공해주는 오브젝트
    -> SpriteKit 프레임워크를 사용하여 2D 장면을 표시
    -> 이를 통해 애플리케이션에서 2D 장면을 쉽게 로드, 조작 및 렌더링할 수 있음

  • ARkit SceneKit View

    SceneKit로 렌더링되고 ARkit으로 증강된 그래픽을 제공해주는 오브젝트
    -> ARKit 및 SceneKit 프레임워크를 사용하여 카메라 배경에 3D 장면을 표시
    -> ARSession을 래핑하고 애플리케이션에서 3D 장면을 쉽게 로드, 조작 및 렌더링할 수 있음

  • ARkit SpriteKit View

    SceneKit로 렌더링되고 ARkit으로 증강된 그래픽을 제공해주는 오브젝트
    -> ARKit 및 SpriteKit 프레임워크를 사용하여 장면을 표시
    -> ARSession을 래핑하고 애플리케이션에서 장면을 쉽게 로드, 조작 및 렌더링할 수 있음

  • Web view (deprecated)

    상호작용(Interactive)하는 웹 컨텐츠를 표시하는 오브젝트
    -> 구버젼을 지원하는 View. WKWebView을 사용하라고함.

  • WebKit View

    상호작용(Interactive)하는 웹 컨텐츠를 표시하는 오브젝트
    -> 포함된 웹 콘텐츠를 표시하고 콘텐츠 탐색을 활성화함

  • RealityKit AR View

    RealityKit로 렌더링된 그래픽을 제공해주는 오브젝트
    -> RealityKit 프레임워크를 사용하여 3D 상호작용형 AR 장면을 표시
    -> 이를 통해 애플리케이션에서 3D AR 콘텐츠를 쉽게 로드, 조작 및 렌더링할 수 있음

Component_4

  • Core Location Button

    장치의 현재 위치에 대해 일회성으로 권한을 부여하는 오브젝트
    -> UIButton과 매우 유사하게 작동하며, 버튼을 눌렀을 때 장치의 현재 위치에 대한 일회성 권한을 부여할 수 있음

  • View

    텅 빈 View 오브젝트
    -> View 계층에서 상위 계층 직사각형 내에서 그리기, 하위 View 레이아웃 및 이벤트 처리를 위한 구조를 제공

  • Container View

    하위 view 컨트롤러를 호스팅하는 오브젝트
    -> 하위 View 컨트롤러를 호스팅하기 위해 View 컨트롤러의 View 계층 구조 내 영역을 정의

  • Navigation Bar

    title과 옵션 버튼을 제공하는 오브젝트
    -> 상태 표시줄 바로 아래에 네이게이션 바를 제공

  • Navigation Item

    Navigation Bar 컨텐츠 오브젝트
    -> 항목이 네비게이션 바 스택 가장 위에 있을 때 와 맨 뒤 항목일 때 어떻게 표시되는지에 대한 방법을 포함하는 정보를 캡슐화함

  • Toolbar

    버튼들이 있는 가로 bar를 나타내는 오브젝트
    -> 화면 하단에 도구 모음을 표시하고 도구 모음 항목의 표시 및 선택을 지원

  • Bar Button Item

    Toolbar 또는 Navigation Bar 안에 있는 버튼 오프젝트
    -> 일반 Button과 유사하게 동작하며 제목, 이미지, action(동작), target이 있음

  • Fixed Space Bar Button Item

    toolbar 내의 고정된 분리 오브젝트
    -> toolbar 내 인접 항목들을 일정 간격으로 고정시켜 구분시켜줌

  • Flexible Space Bar Button Item

    toolbar 내의 유동적인(Flexible) 분리 오브젝트
    -> toolbar 내 인접 항목들을 일정 간격으로 flexible하게 구분시켜줌

  • Tab Bar

    선택가능한 아이템들이 담긴 행을 제공하는 오브젝트
    -> 앱내에서의 보기 혹은 하위작업, 모드 선택을 위한 Bar를 제공

  • Tab Bar Item

    Tab Bar 안에 있는 item 오브젝트
    -> Tab Bar의 항목들을 나타내며, 각 항목에는 제목과 이미지가 있음

  • Search Bar

    검색 영역이 있는 bar를 제공하는 오브젝트
    -> 키보드의 return이 tab될때 target으로 액션을 보내는 검색 bar

  • Menu Command

    action 혹은 설정을 나타내는 오브젝트
    -> 다른 Command들과 함께 그룹화되어 있으며 첫번째로 선택된 command를 action으로 보냄

  • Main Menu

    기본 메인 메뉴 오브젝트
    -> macOS에서 사용되는 기본 메뉴 및 기본 command들이 포함되어 있음(맥북의 맨 위 toolbar 느낌)

  • Sub Menu

    하위 메뉴를 보여주는 오브젝트
    -> 하위 메뉴를 보여주는 메뉴

  • Inline Selection Menu

    menu 또는 command를 일렬로 그룹화시키는 오브젝트
    -> children(하위메뉴 혹은 command)를 각각 구분지어 일렬로 표시하는 메뉴

Component_5

  • View Controller

    한 개의 view를 관리하는 오브젝트
    -> toolbar, navigation bar, 그리고 애플리케이션 view에 대한 관리 기능을 제공

  • Storyboard Reference

    다른 스토리보드를 참조하는 오브젝트
    -> 스토리보드를 여러 파일로 분해할 수 있게 해줌
    -> placeholder에 연결된 Segue를 사용하면 한 스토리보드에서 다른 스토리보드로 전환가능

  • Navigation Controller

    navigation bar와 view controller 스택을 관리하는 오브젝트
    -> view controller가 스택에서 push 또는 pop되면 navigation controller는 navigation bar와 view를 적절하게 업데이트해야함

  • Table View Controller

    Table View를 관리하는 오브젝트
    -> 알맞은 크기와 재조정된 사이즈의 마스크를 가진 인스턴스를 만듦
    -> table view의 DataSource & Delegate 프토로콜 역할을 함

  • Collection View Controller

    Collection View를 관리하는 오브젝트
    -> 알맞은 크기와 재조정된 사이즈의 마스크를 가진 인스턴스를 만듦
    -> collection view의 DataSource & Delegate 프토로콜 역할을 함

  • Tab Bar Controller

    tab bar 항목인 view controller를 관리하는 오브젝트
    -> 각 view controller는 각 tab bar item에 대한 정보를 제공하고 item이 선택됐을 때 표시되는 view를 제곻

  • Split View Controller

    두개의 view conrtoller를 반 반 나눠서 보여주는 오브젝트
    -> 보통 상위 view controller가 하위 view controller에서부터 시작되는 인터페이스 detail change를 하는데 사용

  • Page View Controller

    일련의 view controller를 통한 페이지 오브젝트
    -> DataSource & Delegate와의 조정을 통해 일련의 view controller를 페이지로 표시

  • Hosting View Controller

    content가 SwiftUI View인 UIViewController
    -> 정확히 뭔지 모르겠음..

  • GLKit View Controller

    모든 표준 view controller 기능을 제공하고 OpenGL ES 렌더링 루프를 구현하는 오브젝트
    -> GLKViewController 개체는 GLKView 개체와 함께 작동하여 view에 애니메이션 프레임을 표시

  • AVKit Player View Controller

    시청각 컨텐츠를 제공하는 오브젝트
    -> 시청각 콘텐츠 및 표준 재생 컨트롤을 표시할 수 있는 AVPlayer 개체를 관리하는 컨트롤러

  • Object

    오브젝트를 인스턴스화 시키는 오브젝트
    -> 사용자 정의 inspector를 사용하여 이 오브젝트를 특정 클래스의 인스턴스로 전환시킴

Component_6

  • Tap Gesture Recognizer

    간단한 Tab에 반응하는 오브젝트
    -> 사용자가 Tab할때 action 메시지를 보냄.

  • Pinch Gesture Recognizer

    pinch gesture(두 손가락으로 오므리는 동작)에 반응하는 오브젝트
    -> 사용자가 두 손가락으로 pinch gesture를 취할 때 계속해서 action 메시지를 보냄(확대, 축소)

  • Rotation Gesture Recognizer

    rotation gesture(두 손가락으로 회전하는 동작)에 반응하는 오브젝트
    -> 사용자가 두 손가락으로 rotation gesture를 취할 때 계속해서 action 메시지를 보냄(컨텐츠 회전)

  • Swipe Gesture Recognizer

    swipe gesture(쓸어내리는 동작)에 반응하는 오브젝트
    -> 사용자가 swipe gesture를 취할 때 action 메시지를 보냄
    -> 여러 방향을 인식하려면 여러개의 recognizer을 사용해야함

  • Pan Gesture Recognizer

    pen gesture(드래그하는 동작)에 반응하는 오브젝트
    -> 사용자가 드래그하는 동안 계속해서 action 메시지를 보냄

  • Screen Edge Pan Gesture Recognizer

    가장자리에서 pan gesture(드래그하는 동작)에 반응하는 오브젝트
    -> 사용자가 화면 가장자리에서 드래그하는 동안 계속해서 action 메시지를 보냄

  • Long Press Gesture Recognizer

    long press(누르고 있는 동작)에 반응하는 오브젝트
    -> 사용자가 누르는 동안 계속해서 action 메시지를 보냄

  • Custom Gesture Recogn

    custom gesture에 반응하는 오브젝트
    -> 사용자가 사용자 지정 gesture를 수행할 때 action 메시지를 보냄

AutoLayout이란?

제약 조건(Constraints)에 따라 view 계층 구조에 있는 모든 view의 크기와 위치를 동적으로 지정하는 것

사실 감이 잘 안잡혀서.. 이건 이론으로만 파악하기에는 무리가 있다고 생각해서 과제 3번을 직접해보면서 AutoLayout에 대한 개념과 사용법을 숙지했음..

그 결과 도대체 왜 오토레이아웃 오토레이아웃하는지 알았고 생각보다 그렇게 어려운 개념도 복잡한 사용법을 갖고있는것도 아니였음..

우선 내 기준 AutoLayout이 필요한 이유는 모든 컴포넌트에 상대적인 기준을 둠으로써 기기 혹은 해상도가 변하더라도 View들의 width나 margin 등이 동적 지정되기 때문이라고 생각..

다시 말하자면 나중에 만약 App을 하나 만들어서 App store에 출시한다고 가정해보자. 이때 내가 고려해야되는것은 가장 최신폰인 아이폰 13pro뿐만아니라 이전에 나온 아이폰 11, 10 혹은 그 이전 모델도 고려해야하고 심지어는 iPad도 고려해야할수도 있다.

그러면 이 각각 모델들에 대한 화면 크기와 해상도를 다 고려해서 따로따로 만들것인가..? 물론 가능은 하겠다지만 App 출시 이전에 개발하다 과로사로 죽을듯..
아무튼 이러한 이유때문에 AutoLayout을 쓰는것같다.

AutoLayout 사용법

우선 AutoLayout을 사용하려면 반드시 알아야 할 개념이 있는데, "xcode한테 컴포넌트의 위치와 크기를 알려줘야된다" 라는 것이다.

아무리 똑똑한 컴퓨터라지만.. 내가 일일이 만드는 컴포넌트들의 모든 크기와 사이즈 그리고 위치까지 다 계산할 수는 없는법이다. 그래서 일정 부분은 내가 직접 수동으로 입력을 해줘야하는데 이 부분이 바로 AutoLayout을 설정해주는것이다.

아래 사진처럼 View Controller안에 갈색 View가 하나 있다고 생각해보자.
우측 하단에 빨간색 네모 박스를 눌러보면 저렇게 새로운 Constraints를 만들 수 있는 창이 뜨는데, 저게 바로 AutoLayer을 설정하는 방법중 하나이다.(내 생각엔 이게 가장 쉬운듯)

지금 저 네모 박스가 상단으로부터 127만큼 떨어져있고 좌측으로는 57, 하단으로는 353 그리고 우측으로는 135만큼 떨어져있다는 것이다. 물론 이 숫자들은 절대적인 숫자라기보다는 일종의 비율? 이라고 생각하면 된다. 아이폰 11이나 아이폰 7에서는 화면 크기가 다를테니까..

아무튼 위 사진 중앙에 있는 쳐놓은 빨간색 박스 안에 있는 앵커(점선)를 누르면 "내가 지금부터 이 값을 고정시키겠다' 라는 의미에 제약조건(Constraints)이 설정된다. 물론 설정 이후에도 나중에 값을 조정할 수 있지만, 이 값을 설정함으로써 xcode한테 컴포넌트의 위치와 크기를 하나씩 알려주는 것이다.
예를 들어 내가 왼쪽 앵커와 오른쪽 앵커를 설정한다고 가정했을 때, View의 전체 가로 길이에서 왼쪽 여백 값과 오른쪽 여백 값을 빼면 컴포넌트의 가로 값이 나오고 xcode는 컴포넌트의 가로 길이와 이 가로가 View에서 얼마나 떨어져있는지를 인식한다(xcode는 View의 전체 가로와 세로길이는 알고있다)

그러면 끝인가?
아니다. xcode가 컴포넌트의 가로길이는 알고있지만 컴포넌트의 세로길이와 이 세로가 벽에서 얼마만큼 떨어져있는지는 모르고있다. 그래서 세로길이 또한 설정해줘야한다. 이때 아까 가로를 설정해준 방식처럼 위 아래 앵커를 걸어주는 방식으로 값을 지정해주는 방법도 있지만, Height를 설정해주고 위 앵커만 걸어주는 방식도 이와 동일하다.

Height를 지정해주면(Height 왼쪽에 체크박스 클릭) xcode가 컴포넌트의 세로길이를 인식하고, 그리고 위 앵커를 걸어주면 이 컴포넌트로부터 View의 위까지 얼마나 떨어져있는지 알게된다. 그러면 xcode가 View의 전체 세로길이는 알고있으니 Height와 view의 위까지의 거리를 빼주게되면 자동으로 view의 아래까지의 거리도 나오게된다! 이것을 xcode가 인식하는것!

2줄 요약

  • 컴포넌트의 크기(가로,세로) 그리고 컴포넌트의 위치(가로: x축, 세로: y축)를 xcode에게 알려줘야 함.
  • 앵커를 직접 걸어주는 방식도 있고 height 또는 width를 설정해주는 방식도 있음

여러 방법이 있겠지만 가장 좋은 방법은 직접 이런 저런 View를 구상해보면서 직접 터득하는것..!

profile
일단 배우는거만 정리해보자 차근차근,,

0개의 댓글