스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36

스톱워치 만들기 (4) : https://wiwi-pe.tistory.com/37

스톱워치 만들기 (5) : https://wiwi-pe.tistory.com/38

스톱워치 만들기 5까지 끝내셨다면 이제 스토리보드에 오브젝트를 추가할일은 없습니다

이번편부터 주로 다룰 부분은 텍스트창 입니다 확장자가 .swift 로 되는 파일들에 적어넣어갈꺼에요

우선 파일 이름이 마음에 안들어서 하나 삭제하고 다시 만들겁니다.

프로젝트 네비게이션에서 ViewController.swift 파일을 선택하고 키보드의 Delete키를 눌르신후 휴지통으로 버려주세요

위 사진의 선택된 부분을 삭제하시면됩니다.

그후 프로젝트 네비게이터의 Tutorial1 라 적힌 폴더에서 마우스 우클릭(옵션메뉴)을 한후 New File을 선택해줍니다

아래 사진의 iOS 의 Cocoa Touch Class( 소스 템플릿입니다)를 선택하신후 다음을눌러주세요

Class이름을 MainVC라 적을겁니다.

그리고 다음을 누르고 생성을 누르시면됩니다

굳이 원래있던 ViewController.swift 를 삭제하고 같은 역할을하는 클래스를 생성해준이유는 

그냥 제 스타일입니다 ㅎ 

그냥 원래 있던 ViewController.swift에서 앞으로할 작업을 하셔도 상관없어요

저는 스토리보드이름과 vc(viewcontroller)파일이름을 맞춰주는걸 좋아해서 이렇게 했습니다

저와같이 생성하셨으면

프로젝트 네비게이터가 아래사진과같이 되시면됩니다

다시 Main.storyboard로 돌아가서

아래 사진의 화면의 아이폰화면 상단에 있는 검은색바를 선택해주세요

그후 인스펙터즈 화면에서  네번째 아이콘 아이덴티티 익스펙터화면으로간후

Custom Class가 아래화면처럼 ViewController로 되어있을겁니다 

이는 처음 자동생성되면서 방금 지운 ViewController.swift에 만들어져있는 ViewContoller클래스이름이 자동으로 넣어져있는겁니다

이 Class를 아래와같이 변경해주세요. 방금 만든 MainVC를 적으시면됩니다

변경이 잘됐으면 스토리보드의 좌측영역 스트럭쳐에리어 부분이 ViewController Scene에서 MainVC Scene으로 변경되었을겁니다

다룰 클래스도 바꾸었습니다

이제 스토리보드영역의 상단바의 가장 오른쪽 버튼(Add editor on Right 라 설명이 나오는 버튼)을 눌러 에디터화면을 늘려줍니다 아래 사진의 하얀색 점선으로 그린 사각형 영역입니다 

이버튼을 누르면 화면이 아래와같이 되었을겁니다

추가된 화면의 상단바의 Main.storyboard라고 적힌 부분을 클릭한후 MainVC를 눌러주세요

각 에디터는 이런식으로 변경해줄수도 있고

프로젝트 네비게이터에서 드래그앤드롭으로 변경해줄수도 잇습니다. 아니면 바꿀에디터화면을 한번 선택한 상태에서 프로젝트 네비게이터에서 열 파일을 선택하시면됩니다.

여러방법으로 추가한 에디터화면이 아래 사진과 같이 되었으면됩니다 

위 사진과같이 여셨다면 아래 영상과같이 소스코드에 각 오브젝트들을 연결해주세요

영상에는 안나왔습니다만 스토리보드에서 아이템을 소스로 연결시킬때는 컨트롤키를 누른상태에서 드래그엔 드롭 해주시면됩니다

각 소스에 붙은 @IBOutlet 은

@IB는

 Interface Builder Annotation 의 IB와 A를 @로 한거라하는데 자세한 설명이 안보이네요 .

저도 독학으로 공부한거라 미흡한 부분이 많으니 부디 이 튜토리얼을 따라하시는분들은 따로 검색해보시기바랍니다.

스토리보드에서 바로 코드로 연결하는 변수들은 두가지 정도의 종류가 있습니다 

@IBOutlet( 앞으로는 아울렛변수라 부르겠습니다)

@IBAction 

아울렛 변수는 그 해당하는 아이템의 속성을 변경해주기위해 지정하는것이고

IBAction은 화면에서는 안나왔지만 버튼과같은 컨트롤오브젝트들의 동작을 바로 함수로 연결해줄때 함수앞에 붙는 이름입니다.

아울렛변수로 지정하는것은 스토리보드에서 어트리뷰트 인스펙터보다 더 다양하고 또 프로그램의 흐름에따라 변경이 가능하게할 수 있기에

많이 사용하게 될겁니다.

물론 이들은 스토리보드와 같이 개발할때 사용합니다 ㅎ

오늘은 버튼하나에 대해서는 다루다 끝을 맺겠습니다

자동으로 생성된 소스에는 

override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

  }

라는 부분이 있습니다.

친절하게도 저렇게 주석이 달려있어서 무슨 역할을 하는 함수인지 알아볼수 있어요

view에 대해 아직 익숙하지 않을시점이지만 무엇인지는 짐작이 가실테고 제목에서부터 view가 로드된후 라는이름을 가진 함수라

쉽게 짐작하실겁니다.

이 함수는 뷰가 전부다 생성이 된후에 이 클래스가 처음 실행될때  단 한번만 실행이 되는 함수입니다 원래 setup이라는게 보통 한번만 해주잖아요? ㅎ 

단 한번만이라는게 중요한데

이 Viewcontroller라는게 여러 주요 돌아가는 함수들이 있습니다.

이에대해 궁굼하신분은 추가적으로 iOS ViewController Life Cycle 라고 검색하시면 더 자세히 알 수 있습니다

아무튼 다시 원래 이야기로 돌아가서 이번 포스트에서는 버튼에 대한걸 하나만 이 viewDidLoad함수에다가 설정해주고 끝낼겁니다

이 버튼은 UIButton 이라는 클래스입니다

이 클래스는 UIControl이라는 클래스를 상속받은 클래스이고

UIControl은 UIView라는 클래스를 상속받은 클래스입니다.

결국다! UI라 붙은 클래스들은 그 상위가 UIView의 민족이라는 놀라운 이야기.........

는 집어치우고 

상속받은 클래스들 이름을 보면 알수 있듯이 이 UIButton은 View가 있고 Control을 할 수 있는 클래스입니다.

이 뷰쪽은 스토리보드에서 설정을 끝마쳤으니 저희가 할 부분은 Control부분의 설정입니다,.

UIButton에서 사용할 속성과 함수들은( 애플에서의 설명들...)

. 애플 도큐먼트 페이지를 보시면 더 많은 정보를 얻으실 수 있으십니다.

우선 UIView에 정의되어있는 태그

tag

An integer that you can use to identify view objects in your application.

Declaration

var tag: Int { get set }

Discussion

The default value is 0. You can set the value of this tag and use that value to identify the view later.

UIControl에 정의되어있는 addTarget

addTarget(_:action:for:)

Associates a target object and action method with the control.

Declaration

func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControl.Event)

UIControl에 정의되어있는 isEnabled

isEnabled

A Boolean value indicating whether the control is enabled.

Declaration

var isEnabled: Bool { get set }

Discussion

Set the value of this property to true to enable the control or false to disable it. An enabled control is capable of responding to user interactions, whereas a disabled control ignores touch events and may draw itself differently. Setting this property to false adds the disabled flag to the control’s state bitmask; enabling the control again removes that flag.

The default value of this property is true for a newly created control. You can set a control’s initial enabled state in your storyboard file.

UIButton에 대해 설정할 수 있는데 엄청 많지만

이렇게 버튼은 세개만 다룰겁니다.

우선 startButton에 tag를 지정할겁니다

태그는 일종의 이름으로서 클래스내부에서 startButton이라는 버튼의 주민등록번호같은 역할을합니다

이렇게 태그를 넣어주는이유는 MainVC라는 클래스에서 사용되는 버튼들이 눌려졌을때에대한 동작을 하나의 함수로 몰아주려고하는데

이따 하나의 함수에서 여러개의 버튼을 구분하기위한 방법중하나입니다.

물론 이 버튼에 쓰여있는(버튼 라벨)글이나 여러가지방법으로 구분이 가능할수도 있겟습니다만

저는 태그를 통해 하려고해요

소스를 다음과같이 수정해줍시다

viewDidLoad()의 주석을 지우고 그자리에 

startButton.tag = 10

을 넣어주세요. ( Tag의 설명에 있듯이 태그값은 정수만 가능합니다 )

override func viewDidLoad() {

    super.viewDidLoad()

    startButton.tag = 10

}

태그는 지정해주었고 이제 startButton이 눌러졌을때의 기능을 만들겁니다

viewDidLoad() 함수가 끝나는 '}' 다음에 

다음과같이 적어주세요

@objc func buttonAction(_ sender:UIButton) {

    print(sender.tag)

}

@objc 라는의미는 스위프트 이전에 iOS앱만드는데 사용했던언어인 objective C에서 사용된 라이브러리

혹은 각종 클래스에서 사용할 수 있게 만드는 마법의 키워드입니다

이 키워드로 인해 swift와 objective c는 좋은 사이를 유지하면서 발전가능해집니다

위에서 스토리보드의 오브젝트들과 코드를 연결해주면서 자동으로 연결되었던 라인들을 보시면 짐작하시겠지만

스위프트4에서는 기본적으로 

상수or변수  이름:타입 = 값

형태로 변수를 선언합니다

이 형태는 함수의 파라미터에서도 그대로 사용됩니다.

buttonAction이라는 함수는 sender라는 이름의 파라미터를 가지고있는데

이는 변하지않는 상수 형태이며 UIButton이라는 타입인 파라미터라고 쓴겁니다.

sender 앞에 ' _ ' 라고 적은것은

외부에서 함수를 부를때 buttonAction( 값 ) 형태로, 파라미터이름을 표시하기 싫을때 _ 라고 표시합니다.

이를 _ 대신 다른, 예를 들어 A라 적었으면 buttonAction(A: 값) 형태로 호출을 해야합니다.

외부에서 보여지는 파라미터의 닉네임을 정해줄수 있는거에요

buttonAction은 꼭 파라미터를 _ sender:UIButton 으로 줘주세요 ( 여기 프로젝트에서 한정입니다 ^^) 

다른 언어 특히 파이썬을 해보신분은 buttonAction함수안에 있는 내용이 상당히 익숙할건데

이는 sender라는 버튼의 태그값을 콘솔에 출력해주세요 라는 명령입니다.

이제 startButton에 묶을 함수까지 만들었으니

startButton에 함수를 연결해줘야합니다.

startButton.tag = 10 라인 밑에

startButton.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)

라고 적어줍시다

addTarget은 

위에 애플설명처럼 

타겟 오브젝트와 액션메소드(함수)를 연결시켜주는 UIControl에 정의되어있는 함수입니다 

원형은 

func addTarget(_ target: Any?, action: Selector, for controlEvents: UIControl.Event)

인데  타겟 파라미터 앞에 _ 가 붙어있죠?

그래서 startButton에 addTarget의 가장첫파라미터는 target: 값 이라 적지않고

바로 self라는 값을 넣어준겁니다. 

이 타겟의 파라미터에 대한 설명을 애플은 아래와같이 문서에 적어놨습니다.

target
The target object—that is, the object whose action method is called. If you specify nil, UIKit searches the responder chain for an object that responds to the specified action message and delivers the message to that object.

요약해 호출되는 객체를 지정하는 것이라는데 저는 아직 self 밖에 해보질않아 다른것을 지정해줄때도 있는것인지 모르겠습니다!

혹시 이글을 보시는분들중에 아시는분계시다면 꼭 공유해주셨으면 좋겠네요 

그렇게 다음 action은 지정해줄 함수를 말하는데

#selector가 objective c로 만들어진것인지 

액션메소드가 꼭 @objc가 붙어야 인식이됩니다.

그다음은 for 라는 파라미터는 버튼의 상태, 어떤 이벤트가 발생했을때 이 액션메소드(buttonAction)가 실행되는가인데

다른 UIControl를 상속하는 오브젝트들의 이벤트까지 같이 들어있기에 꽤 많이 있습니다

우리는 이 많은 이벤트중에 

static var touchUpInside: UIControl.Event

A touch-up event in the control where the finger is inside the bounds of the control.

를 사용할겁니다

말그대로 버튼을 누른후 그장소에서 손을땠을때 라는이벤트입니다

이번에 지정해준 addTarget의 내용을 정리하자면

영어이니 뒤에서부터 해석하자면

버튼을 눌렀다가 그 장소에서 땟을때 buttonAction를 함수를 실행시키는데 이에대한 호출자가 startButton이다 라는 의미입니다.

그렇게 

class MainVC:UIViewController {} 의 총 소스는

아래와같습니다.

import UIKit

class MainVC: UIViewController {
    
    @IBOutlet weak var lapTableView: UITableView!
    
    @IBOutlet weak var timeLabel: UILabel!
    @IBOutlet weak var decimalLabel: UILabel!
    
    @IBOutlet weak var startButton: UIButton!
    @IBOutlet weak var checkButton: UIButton!
    @IBOutlet weak var stopButton: UIButton!
    @IBOutlet weak var resetButton: UIButton!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        startButton.tag = 10
        startButton.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
    }
    
    @objc func buttonAction(_ sender:UIButton) {
        print(sender.tag)
    }
}

이를 시뮬레이터, 아이폰11에서 실행하면 

아래영상과같이 나온다면 성공입니다!

그럼 다음 포스트에서 봐요~

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36

스톱워치 만들기 (4) : https://wiwi-pe.tistory.com/37

이 튜토리얼의 4번까지 무사히 마치셨다면 드디어 이번편에서 화면구성이 완성됩니다.

원래 생각했던 진도는 1편에서 화면이 완성되고 2편에서 코딩으로 끝내는 짧은 튜토리얼을 생각했는데

어느새 5편째 쓰고있네요............

그럼 바로 UI수정에 들어갑시다.

4편 마지막에서 라벨에대한수정이 들어간다고 했는데

사실 라벨이 하나더 추가됩니다!

만드려고하는 앱화면에서 소수점 크기가 다른부분을 다른 라벨로 붙여주려고합니다.

사실 라벨하나로 이러한일을 할 수 있습니다.

오히려 그렇게하는게 더 깔끔하게 보일수도 있어요.

제가 시간이 많아서 두개로 나눴을때와 하나로 했을때를 비교하는 내용도 넣었으면 좋겠습니다만 

이런부분도 그냥 넘어갈게요. 

이 튜토리얼로 공부하고 계시는분은 그 차이에대해 꼭 돌려보시기 바랍니다.

그럼 우선 아래 사진처럼 라벨을 하나더 추가해줍시다.

추가 하셨으면 이제 기존 라벨의 텍스트를 .0를 뺀 00:00으로 수정해주시고 새롭게 추가한 라벨에 .0(이하 소수점라벨)을 넣어줍시다.

그리고 소수점 라벨의 폰트크기를 키워줄거에요.

타임라벨의 크기를 100으로 잡았으니 딱 반절, 소수점 라벨의 폰트 크기를 50으로 잡아줍시다. 

이제 소수점 라벨을 다른 오브젝트들처럼 제약조건을 잡아줄거에요. 아래 사진과 같이 추가해줍시다.

네, 리딩값만 넣어줬어요!

보통 위치라는건 x값과 y값이 정해져있어야합니다.

그러니까 최소 두개의 기준이있어야 위치가 잡힌다는거에요

단순 위치만 말하자면입니다 

스토리보드에서 오토레이아웃을 잡을때 신경써야할부분은 

시작점(x,y)과 너비 높이 입니다

리딩을 잡았으면(x값) 탑이나 바텀을 잡아 Y값에대한 정보가 필요한겁니다.

라벨은 안에있는 글자크기에 맞춰져서 크기를 계산하기에 유동적으로 변화하는 상황이아니라면 크기값은 따로 안줘도됩니다 ㅎ

아무튼 x값에대한 제약조건을 걸어줬으면 

이제 y값에대한 제약조건을 걸어줄거에요

처음봣던 앱화면의 디자인대로 옆의 타임라벨의 밑줄을 맞춰줄겁니다.

소수점 라벨을 선택한상태로 command키를 누르면서 타임라벨을 선택해 총 소수점라벨,타임라벨 두개를 선택해주세요.

그리고 스토리보드화면의 하단 버튼중 2번째버튼( 기존 Constraints를 추가했던 버튼의 좌측버튼)을 눌러서 First Baselines를 체크해서 추가해줍시다 아래사진처럼요

최종적으로 소수점 라벨에 붙을 제약조건은 아래와같습니다.

Horizontal, 가로축에대한 제약조건(x축값은) 타임라벨바로붙어있구요

Vertical, 세로축에대한 제약조건(y축값은) 타임라벨의 First Baseline과 같습니다.,

이 베이스 라인에대한 꽤나 좋게 설명이 되있는 글이 있어 첨부합니다!

https://www.prolificinteractive.com/2016/03/08/all-about-that-baseline-3/

이제 라벨에대한 화면이 끝난것같지만

사실 조금 달라요.

이게 지금 하고있는 앱의 아이폰11 화면이구요

이게원래 만들려고했던 앱의 아이폰11화면입니다.

대충그은 가운데선이지만 딱봐도 만드려는 앱은 소수점부까지 합쳐서 가운데정렬이 되어있지요?

이것을 해결하는방법은 두 라벨을 하나의 뷰에 넣고 뷰를 가운데정렬하거나

타임라벨의 가운데로 정렬한 제약조건을 살짝 수정하는겁니다

저는 제약조건을 수정해줄거에요.

소수점라벨의 시뮬레이터상의 너비를 보면

사이즈 인스펙터에 보면 너비가 44로 나옵니다

".0" 이라는 텍스트를 넣었을때 딱 맞는 크기는 44너비라는거에요

이 너비의 반절만큼만 타임라벨을 왼쪽으로 움직이면될듯보입니다.

그럼 타임라벨의 가운데정렬을 시킨 제약조건을 더블클릭해서 수정모드로 들어간후 왼쪽으로 22만큼 옴겨주도록 설정해봅시다

위 사진은 타임라벨에 넣어진 제약조건들입니다(사이즈 인스펙터 하단부분) 

여기서 수정해야할것은 Align Center X to: Superview 부분이에요

이를 더블클릭해주고

이렇게 -22로 적어줍시다.

이게 Frist Item과 Second Item 순서가 바뀌어있을수 있어요

그러면 +22입니다

두 객체 사이의 거리를 설정하는게 기본이기에 항상 방향은 넣어지는 아이템순서에따라 바뀔수있기에 스토리보드화면에서 변경되는것을 확인해보고 저장합시다

그러면 이제 아이폰11화면으로 실행해보면 아래와같이나옵니다

음 아주 마음에 듭니다 

색이 제대로 들어갔는지 (시스템 색상으로 설정되어있어야합니다)

확인해볼게요 다크모드로 변경해보죠

시뮬레이터의 홈바를 눌러 바탕화면으로 간뒤 설정앱으로 들어가줍시다

위 사진의 Developer 혹은 한글로되어있으면 

같은 망치 아이콘에 개발자 라고 되어있는 메뉴에 들어가주세요

그러면 상단에 Dark Appearance라는 항목이 있습니다 이 항목의 스위치를 켜주세요

그러면 위화면과같이 다크모드로 변경됩니다

이제 다시 만들고있는 앱화면으로 돌아가보면 

전부다 글씨가 보이네요

맘에듭니다 ㅎ

글씨가 안보이시는분은 해당 오브젝트의 색상이 

Default 아니면 앞에 System이 붙은 색상인지 확인해보세요.

아 Label Color도 자동으로 변경됩니다 ㅎ

물론 이는 애플에서 정해주는 스타일이라 나중에 나는 다크모드에서는 다른색으로 변경하고싶어! 라고 하시는분들은

이러한 색상조합을따로 만들수있어요.

이에대한 부분은 다른튜토리얼에서 다뤄봤으면 좋겠네요 ㅎ

위에서는 그냥바로 시뮬레이터에서 다크모드로 실행해봤습니다만 

사실 스토리보드에서 대강? 다크모드를 확인할 수 있습니다 ㅎ

스토리보드 하단에 보시면 View as: iPhone11 이라고 적힌 부분이있습니다 이를 누르면 

아래사진처럼 스토리보드의 디바이스를 바꿀수있어요 그리고 그옆에 Interface Style을 빗금이 그어진 애로 변경하면

아래와 같이 다크모드에서 어떻게 보이나 대강 알아 볼수있도록 스토리보드가 변경됩니다

하지만 이는 다른 요인으로 변경될 수 잇으니 정확이 확인해보시려면 앱을 직접 실행시켜봐야겠죠?

아무튼 오늘은 짧게 끝내겠습니다

그리고 드디어 앱화면이 완성된것에 대한 박수를 보낼수있게되었어요!

 이제 다음편은 드디어 이 각 화면에대한 기능을 만들어볼겁니다 .

다음편에 봐요~

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

스톱워치 만들기 (3) : https://wiwi-pe.tistory.com/36

저번 시간까지 무사히 마치고 이번 포스트까지 오셧다는 가정하에 시작해보겠습니다.

이번에는 저번 3편에서 있던 문제인 정렬에 대한 문제를 해결할겁니다.

어제는 주로 확인했던 창이 우측의 어트리부트 인스펙터 였는데

오늘은 사이즈 인스펙터입니다

아래의 사진과같은곳이죠. 정렬과 크기에 대한 내용을 담고있어서 그런가 아이콘부터가 자모양이죠?

위 사진은 Label을 선택한후 오른쪽영역인 익스펙터즈화면에서 6번째아이콘인 사이즈 인스펙터화면입니다

x와 y의 좌표부터 사이즈 그리고 다룰 레이어아웃에 관한 정보를 보여주고 추가 수정,삭제를 할수 있는 공간입니다.

어제까지의 프로젝트를 그대로 시뮬레이터만 바꿔서 실행해봅시다!

지원할수 있는 가장 작은 사이즈를 iphone xe라 하면 시뮬레이터를 iphone xe로 변경하고 실행해보세요

이런...

저희가 원래 원했던 모양이 아닙니다.

오늘은 이 부분을 해결할것이고, 이에대한 해결이 포스트위에서 말씀드린 사이즈 인스펙터창을 확인하면서 진행될겁니다.

우선 가장위에있는 라벨먼저 고쳐보죠.

라벨을 잘보시면 원래 의도했던 소수점 내용이 화면에 가려서 안보여요

라벨자체도 가운데에있는게 아니라 치우쳐있군요

처음에 라벨을 사이즈및 위치를 선정할때 아이폰11 사이즈를 보면서 했기에 사실 앞쪽(왼쪽) 여백에 대한 문제는 아이폰11사이즈의 화면의 시작점입니다

우리는 화면크기가 바뀌어도 일정한 비율을 유지했으면 좋겠는데

이를 지정하는게 바로 앵커입니다

앵커는 다른 UI쪽을 다루는 내용을 해보신분들은 아시겠지만 UI를 다루지않았으면 갑자기 무슨이야기야 라고 하실수 있으니 별로 좋은 단어는 아니겠네요.

앞으로 이를 Auto Layout, 이라 할것이고 이를위해 추가해야할 애들을 Constraint라 할겁니다.

물론 이를 코드로 다루다보면 앵커라는 단어를 쓰지만 이 튜토리얼에서는 코드로 오토레이아웃을 다루는일을 하지않을겁니다.

이런 단어를 처음 듣는 분은 그냥 아 이런게 있구나 정도로만 생각해두시고 스토리보드창에서 손쉽게 마우스 몇번 클릭으로 추가할 수 있다는것만큼은 기억해주세요

라벨을 스토리보드(Main.storyboard를 선택하고 중앙에 위치한 화면)에서 선택하고 아래의 사진에있는 버튼을 눌러주세요

중앙영역 하단에 "├ ⎕ ┤" 라고적힌 버튼 부분입니다

이 버튼을 누르면 사지너럼 말풍선이 뜨는데 여기에서 상단(앞으로는 탑이라 부르겠습니다) 좌측(앞으로는 리딩이라...) 우측( ... 트레일링 ...) 하단(... 바텀 ...)의 띄여지는 위치와 높이(Height) 너비(Width)를 고정하거나 가로세로에 대한 비율을 고정(Aspect Ratio) 시키는등의 제약을 걸수 있습니다

Contraint(제약,제한,통제)의 단어뜻처럼말이죠

그러면 아래 사진처럼 라벨에 대한 Constraint를 걸어주세요

조금 특이하게 탑과 바텀 그리고 높이만 지정해줬어요 그리고 하단의 Add 3 Constraints 버튼을 눌러주시면됩니다

하단의 사진을 보면

Height Equals: 119.5

Bottom Space to: Table View

Equals: 16

Align Top to: Safe Area

Equals: 16

이  추가가 된것을 확인할 수 있습니다 방금 추가한거에요

추가로 이야기하자면 버튼의 Add라는 이름답게 만약 창이 닫아지고 다시 같은 탑이나 바텀같은 내역을 지정해주면 그것또한 추가가되지 변경이 되지않습니다 변경하시려면 아래사진의 사이즈인스펙터에서  변경할 내역을 더블클릭하셔서 수정하시면되요

Height Equals: 119.5 를 더블클릭해서 수정모드로 들어가는 화면은 바로 아래화면입니다

First Item 과 Relation 그리고 Constraint 변경으로 이 높이제약조건을 변경할수 있어요

Priority는 이 제약조건이 다른 제약조건에의해 지켜지지못할거같을때, 혹은 변경이되어야할때 누구를 우선순위로 잡을것이냐를 지정해주는건데 이 내용은 다루지 않겠습니다.

위의 높이 제약조건 변경화면은 높이이기에 Second Item항목이 없는데

위치(탑,바텀,리딩,트레일링)제약조건일 경우 A가 B로부터 16떨어져야한다 라는같은 지정을위해 Second ITEM 항목이 추가됩니다

라벨에대한 제약조건을 더욱줘봅시다.

지금은 탑, 높이 바텀만 줬으니 리딩,트레일링을 줘야할것같지만 저는 화면이 어찌됐던 이 내용이 가운데에 있었으면 좋겠습니다

이럴때 추가하는게 아래 사진에 나와있는 Alignment Constraint 입니다 가운데 정렬을 원하므로 Horizontal in Container를 체크하고 Add를 눌러줍시다

Horizontal과 Vertical은 영단어 그대로 가로이냐 세로이냐입니다 그외 애들은 직접 예를 보여드려야 이해가 되실듯하지만 이 튜토리얼에서는 다루지않기에 넘어갑니다.

그렇게 라벨에 들어갈 제약조건(constraint)를 다 추가해줬지만 스토리보드화면에서는 빨간색으로 테두리와 스토리보드 영역의 좌측상단에는 빨간불(위 사진의 하얀색 실선테두리 상자) 이 들어와있습니다.

이를 눌러보면 어떤 제약조건이 문제가 생겼는지 알수 있습니다 한번 들어가보세요

내용을 보면 라벨 아래에있는 애들에 대한 제약조건이 없어서 발생하는 문제입니다.

여기에있는 각 항목의 빨간불을 눌러 이 xcode가 제안하는 Constraint를 넣거나 삭제하거나 수정할 수 있지만 이는 권장하지 않습니다.

그럼 테이블뷰와 아래 버튼들에 대한 제약조건을 마져 걸어봅시다.

테이블뷰에 넣을 제약조건은 다음과같습니다

잘 보시면 탑에 대한 제약조건을 걸지않았는데 이는 우측영역 사이즈인스펙터에 보면 이 테이블뷰위에 있을애인 라벨이 바텀 제약조건으로 이미 이 테이블뷰의 탑 제약조건이 추가가 되어있는걸(Top Space to: 00:00.0) 확인할 수 있고 이와 겹쳐지지않게 탑 제약조건은 추가하지 않는것입니다. 

추가하고나면 90높이로 변경되어 원래 원하던 모양이 아님을 알 수 있습니다. 이는 사실 살짝 변경을 해주기 위해 우선적으로 추가해준거에요. 

위 사진에 있는 Height Equals: 90 을 더블클릭해 수정페이지로 들어가줍시다.

그리고 Relation의 Equal 부분을 아래사진처럼 Greater Than or Equal로 변경해줍시다

이 Relation의 내용을 그대로 읽어보면 감이 잡히실건데

다른 제약조건이나 화면크기 변화로 인해 크기가 최소 90이상은 유지해주세요라고 제약을 건겁니다.

이 90은 나중에 추가해줄 랩타임 기록의 한줄정도 표시해줄 사이즈에요.

그래서 화면이 최소로 작아지면서 위(라벨) 아래(버튼)의 위치에 눌려도 최소 90은 보장해줘라! 라고 제약조건을 건겁니다.

그리고 이제 버튼들을 손봐줘야하는데

새로운 오브젝트를, Stack View 라는녀석을 추가해줄겁니다.

스택은 영어사전(파파고)에 검색보면 

• 1.(깔끔하게 정돈하여) 쌓다; 쌓이다, 포개지다[VN] to stack boxes책을 포개다
• 2.(어떤 곳에 물건을 쌓아서) 채우다

라고 뜨는데 이는 각 오브젝트들을 차곡차곡 쌓아 예쁘게 표시해주려고 할때 쓰는 오브젝트입니다.

버튼을 이 스택뷰에 넣어서 깔끔하게 보여주기위해서 사용할거에요

그럼 버튼들을 드래그로 전부다 한번에 선택해준뒤 아래의 사진에있는 버튼을 누른후 뜨는 말풍선에서 Stack View를 선택해줍시다

저처럼 스택뷰를 추가하신분은 스토리보드화면에 버튼들이 아래와같이 묶혀있게됩니다.

이제 이 스택뷰의 설정을 조금 바꿀거게요. 스토리보드에서 스택뷰를 선택하시고(스택뷰안에 있는 버튼이 아닙니다) 우측 인스펙터즈화면을

5번째아이콘인 어트리뷰트 인스펙터로 들어가주세요,

여기서, 이 스택뷰에서 주로 다루는 부분이 바로 

Axis 와 Alignment, Distrubution, Spacing 입니다.

이 속성들에대한 설명은 애플은 이렇게 적어놨습니다.

There are a number of properties that define how the stack view lays out its content.

• The axis property determines the stack’s orientation, either vertically or horizontally.

• The distribution property determines the layout of the arranged views along the stack’s axis.

• The alignment property determines the layout of the arranged views perpendicular to the stack’s axis.

• The spacing property determines the minimum spacing between arranged views.

• The isBaselineRelativeArrangement property determines whether the vertical spacing between views is measured from the baselines.

• The isLayoutMarginsRelativeArrangement property determines whether the stack view lays out its arranged views relative to its layout margins.

요약하고 저딱 4개만 설명하자면

Asis는 이 스택뷰 가로로 쌓이냐 세로로쌓이냐를 선택하는것이고,

Distribution은 Asis에서 선택한 방향의 레이아웃을

Alignment는 이 축의 수직에대한 레이아웃을

Spcaing 안의 녀석들의 최소간격을 결정한다. 입니다 ㅎ

이제 이 속성을 위사진에서 아래사진 처럼 변경해주세요.

그러면 아래와같이 버튼을 묶었던 영여기 작아지게됩니다.

버튼은 스택뷰 좌우로 꽉 차고,  다 같은 높이로 그리고 버튼간 간격은 16 으로 지정한거에요.

이제 이 스택뷰의 Constraints를 추가해줍시다.

스택뷰를 선택하시고( 스택뷰안에 있는 버튼이 아닙니다)  "├ ⎕ ┤" 버튼( Add new Constraints) 를 클릭후 

아래 사진과 같이 추가해주세요

그럼 화면이 아래와같이 나올겁니다.

이제 첫 이 튜토리얼의 첫 포스트에서 보여드려던 앱의 모습과 많이 닮아졌네요!

이제 그럼 아까 문제가 되었던 아이폰se화면으로 실행해봅시다.

xcode상단의 시뮬레이터를 iPhone SE로 변경해주고 실행해주세요!

이런...

타임을 표시해줄 라벨이 양옆이 조금씩 벗어났습니다.

이건 라벨의 크기는 그대로 유지되고 라벨의 가운데는 화면의 가운데로 가져갔으나 양옆에 대한 제약조건이 없기에 발생한문제인데요.

이를 리딩, 트레일링을 넣어줬으면 밖으로 빠져나가지는 않았을겁니다( 대신 라벨의 끝부분이 ... 으로 짤렸을겁니다)

이에 대한 문제는 글자 크기를 줄여주거나 리딩 트레일링을 주면서 자동으로 글자가 작아지게끔 설정을 해주면되는데

우리는 이렇게 주지않을것이고 사실 저 라벨은 임시적으로 달아둔거라 다른모양으로 변경할것입니다.

튜토리얼 1편의 앱에서처럼 변경할거 거든요!

이에대한것은 다음편에서 다루겠습니다

그럼 다음편에서 봐요~

스톱 워치 만들기 (1) : https://wiwi-pe.tistory.com/34

스톱워치 만들기 (2) : https://wiwi-pe.tistory.com/35

저번 2편까지 무사히 끝내셧다면 앱이 시뮬레이터로 무사히 실행이 되었으나

앱에 아무것도 없었을겁니다.

이제 앱에 채워넣을 차례입니다.

1편에서 본 만들려고하는 앱의 화면을 다시한번 보자면

위 에서 부터 차례대로

시간을 표시하는 부분 

랩타임을 표시하는 부분

그리고

시작 버튼

랩타임 체크 버튼

정지 버튼

초기화 버튼

이런식으로

크게 

시간표시, 랩타임표시, 버튼부분 세부분으로 나눠져 있습니다.

우리는 이 화면을 구성하기위해 애플에서 제공해주는 오브젝트들로 붙여넣을꺼에요

설명은 뒤에서 하고 우선 넣을것들 나열하자면

UILabel

UITableView

UIButton

이렇게 세종류와 

추가로

UITableViewCell 이라는 녀석이 이 앱화면을 구성하게 됩니다.

화면 구성을 시작하기전에 에디터에 보여지는 방식을 저랑 맞추겠습니다.

에디터메뉴에 아래 사진처럼 체크해주세요!

다시 앱화면 구성에 대해서 이야기하겠습니다.

우선 UILabel에 대해 이야기하자면

U는 내버려두고 Label을 사전(파파고)에 검색하면 

아래와 같이 나옵니다

label[ˈleɪbl]명사

• 1.(종이 등에 물건에 대한 정보를 적어 붙여 놓은) 표
• 2.(사람물건의 성격 등을 묘사하는) 딱지
• 3.음반사, 레이블

다들 아시다 싶이 그냥 라벨이에요

라벨을 라벨이라 부르지못하고 레이블이라 불러야한다지만 저는 앞으로도 라벨로 부르겠습니다........

이 UILabel은 애플이 이렇게 설명하고있습니다.

A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.

텍스트를 포함하고, 뭐 각종 속성들을 넣어 제어할 수 있다고하네요

라벨이라는 이름답게 글씨를 표시해주는애 입니다. Text를 표시해주는애인데 

이 앱에서는 다루지않을 다른 텍스트를 표시해주는 녀석들도 있습니다.

TableView는 다음에 설명을 할것이고 버튼을 이야기하자면

누구나 다 예상하시듯이 버튼입니다

애플은 이 버튼 오브젝트를 아래와같이 설명해주고 있어요

You can set the title, image, and other appearance properties of a button. In addition, you can specify a different appearance for each button state.

제목, 이미지 기타 속성을 넣고 각 상태따라 다른게 설정을 해줄수있다!

이 상태가 매우 중요합니다.

각 오브젝트들에 대해 자세히 다루지는 않을테니 더 궁굼하신분은 애플디펠로퍼의 도큐먼트 페이지들을 봐주세요

그럼 

우선은 라벨을 넣어서 실행해보죠

프로젝트화면의 좌측의 프로젝트 네비게이션에서 Main.storyboard를 누르시면 가운데 화면이 마치 아이폰 시뮬레이터같은 모양으로 변경됩니다.

이 하얀 녀석을 마우스로 클릭하면 네비게이션 옆에 있는, Structure Area의 View가 선택되었다고 하일라이트가 될겁니다

앞으로 이 뷰 안에 표시할애들을 넣어줄거에요.

뷰안에는 이미 Safe Area가 속해있는데

이는 실제적으로 있는 것이 아니라 실제 화면만 보여질곳, 상단 스테이터스바와 하단 홈바를 제외하고 있는 가운데에 남겨진 영역에 대해 알려주기위한 일종의 가이드라인입니다

앞으로 이 가이드 라인에 대한 도움을 많이 받을거에요

위 사진의 보라색 실선부분, + 버튼 또는 키보드로 command + shift + L 을 누르면 아래와같은 창이 뜹니다

위에 사진처럼 우측에 설명칸이 나와 있을 수도 있고 없을수 도 있습니다.

설명창을 펼치거나 혹은 닫고싶으시면 팝업창 상단의 검색바 옆의 두번째 창모양 버튼을 누르시면되요

이제 창에서 보이는 Label을 아까 선택했던 뷰로 드래그 하고 드롭 해주세요

그럼 아래와 같이 드롭한 장소에 라벨이 하나 생겼을겁니다.

그리고 이 라벨을 더블클릭하면 이 텍스트를 수정할 수 있게됩니다!

아래 사진처럼요

그리고 옆의 

인스펙터영역이 아래와 같이 5번째가 선택되어 딱봐도 이 라벨에 대한 설정을 변경 할 수 있는 창이구나! 라고 알만하게 여러 속성을이 있습니다

이 어트리뷰트 인스펙터창에서 텍스트를 수정하거나, 색상, 정렬 크기 등등 많은걸 수정 할 수 있어요

스토리보드를 통해 작업을하면 기본적으로 이런식으로 뷰에 필요한 오브젝트를 넣고 설정을해주는 식으로 화면을 구성하게 됩니다.

이제 아까 라벨을 추가한것처럼

라이브러리버튼(+버튼)을 눌러서 저희가 사용하려하는

테이블뷰, 버튼들을 배치해줍시다

추가로 넣으려는 오브젝트들은 아래와같습니다 

항목을 잘 선택하셔서 드래그 앤 드롭해주세요

아래와같이요!

그리고 이제 

각각의 오브젝트들을 선택하시면 각 사각형이 크기가 수정가능하게 변하는데 이를 잘 조절하여 최대한 만드려는 앱과 비슷하게 만들어줍시다.

이제 글자 크기와 색상을 맞춰줄꺼에요.

우선 라벨의 속성은 아래와같이 설정해줄겁니다

라벨을 선택하고

우측의 인스펙터즈 창을 어트리뷰트 인스펙터로 변경되는것을 확인한후

font 는 system 100.0

Alignment 는 가운데로 설정합니다

그후 버튼의 색상과 글자크기를 변경할겁니다

우선 Stop버튼을 눌러서 아래와같이 변경해줍시다

그러면 아래와같이 스톱버튼이 변했을거에요.

나머지 버튼들도 만드려고하는 앱의 화면처럼 변경해줍시다.

Start Button , Check Button

font를 30포인트로 올리고 변경없음

Reset Button

font를 30포인트로 올리고 Text Color 를 Label Color로 설정

아래의 사진과 같이되면 됩니다

뭔가 조금 정렬이 안맞고 크기도 잘안맞는거 같고 그렇죠?

그 부분은 다음 포스트에서 다루겠습니다!

오늘 우선한것을 command + r 키 또는 실행버튼으로 시뮬레이터로 돌려보세요

아래와같이 나온다면 이번 튜토리얼도 성공입니다

그럼 다음 포스트에서 봐요~

1편 : https://wiwi-pe.tistory.com/34

1편에 이어 드디어 만들기를 시작할겁니다.

1편에 이야기를 안했지만 이 튜토리얼의 대상은 한번도 코딩을 해본적이 없는자가 아닌 타 언어나 오브젝티브C로 이미 조금은 해본사람들을 대상으로합니다. 이 튜토리얼은 프로그래밍 입문용으로 좋지않습니다.

추가로 이 앱은 19년 1월에 발표한 아이폰 사용자의 iOS 점유을 90% 차지한 11.0을 최소 지원하도록 할 겁니다.

18년도 iOS 버전별 점유율 : https://wiwi-pe.tistory.com/28

1편에 준비물로 적은 xcode를 다운로드, 설치를 완료한 상태로 시작합니다.

프로젝트화면은 이미 설정을 몇가지를 지정해놨기에 실제 이글을 보고 처음 여시는분들과 조금 다를 수 있습니다.

xcode를 실행을 하면 프로젝트 생성이나 기존 있던 프로젝트는 여는 창이뜨게 됩니다.

이상태에서 하얀 테두리가 있는 버튼,

"Create a new Xcode project" 를 눌러주세요.

참고로 사진에서는 우측칸은 회색으로 덮여있습니다만. 원래는 이전 작업했던 프로젝트를 보여줍니다. 조금 문제가 될 수 도 있어 회색상자로 가려놨습니다. 이 이후 사진들도 문제가 될것같은 부분은 회색상자로 가리겠습니다.

이제 xcode에서 무엇을 만들지를 선택해줘야합니다.

우리는 iOS 에 Single View App을 만들겁니다.

사진처럼 iOS항목에 Single View App을 선택해주고 Next버튼을 눌러줍시다

Product Name 칸에는 저희가 할 프로젝트의 이름을 넣어주세요

저는 Tutorial1이라는 이름으로 시작하겠습니다.

Team항목은 잠시만 뒤에서 설명하고 Organization Name에는 저희는 개인 계정으로 만들기에 팀명(이름)으로 그대로 넣어져있거나 넣으시면됩니다.

Organiztion Identifier에는 이제 앞으로 계정에 속하게될 이 앱의 기본적인 ID가 되기에 적당히 Url형식에 맞춰서 정해줍시다.

참고로 주소창에 쓰는 순서그대로가 아닌 역순으로 작성을 해야합니다.

Bundle Identifier 에는 위에서 작성한 Organiztion Identifier과 프로젝트 이름이 합쳐져서 완성이되어 이앱의 ID가 완성됩니다

Language는 Swift로 선택해주시고

User Interface는 Storyboard로 선택해주세요.

이 튜토리얼은 Storyboard기반으로 작성할겁니다.

Storyboard는 각 앱의 기본적인 버튼이나 텍스트를 드롭다운으로 위치지정해서 만들 수 있기에 매우 편리합니다.

참고로 Storyboard 말고 선택 할 수 있는 SwiftUI은 ios13이상에서만 지원하기에 ios11 부터 지원하려고 하는 이 프로젝트에는 사용하지 못합니다.

참고로 Storyboard없이 오로지 코드로만 앱을 작성할 수 도 있지만 튜토리얼에서 다루지 않을겁니다.

이제 Team에 이야기를 해볼건데

Team에는 자신의 계정이 이미 선택되어있거나 선택할 수 있도록 추가가 되어있을거에요.

만약 없을경우

"xcode" 메뉴의 

"Preferences..." 항목을 들어가서

"Accounts" 메뉴에서 추가를 해주세요

이제 프로젝트 화면이 보일겁니다.

위 의 하얀 동그라미친 부분을 저랑 같은 버전의 xcode를 설치하셨다면 iOS13으로 선택되어 있을건데 위 사진처럼 11.0으로 변경해주세요

첫 프로젝트 생성강의라면 각 부분별 설명이 들어가야겠지만 이 튜토리얼에서는 그런 부분은 생략하도록 하겠습니다.

위의 사진의 가장 위의 5개의 버튼중 오른쪽영역을 뜻하는 버튼위에 마우스포인터를 가르키고 가만이 있으면 사진과같이 마우스포인터 하단에 설명이 뜨게 됩니다. 위 사진에서는 우측에 있는 영역을 Inspectors라고 부르는데 이 버튼은 이를 숨기거나 보이게하는 버튼이다 라고 설명으로부터 유추 할 수 있듯이 조금 가지고 놀면서 설명을 읽어나가시다보면 화면 구성에대해서는 대부분 아시게 될 거라 믿기에 생략했습니다.

이제 좌측의 하얀동그라미의 적어있는 파란 아이콘 과 Tutorial1이라 적혀있는부분을 누르시면 가운데 영역이 위의 사진처럼 바뀌게 됩니다

여기서 위사진처럼 보라색동그라미 부분을 iOS11로 바꿔주세요.

그리고 이제 키보드의 command + R 을 누르시면 빌드를 시작하는데

Build Fail이라 뜨면서 

이와 같이 xcode창 상단에 

Tutorial1 | Build Tutorial1 : Faild Today ~~ 라고 뜨고 옆에 빨간 느낌표가 붙어있을겁니다.

빨간 느낌표를 마우스로 눌러보면

화면 좌측 영역이 빌드가 어떤 부분때문에 실패했는지를 알려줍니다.

대강 읽어봐도 iOS13부터 지원되는 함수들이니 사용하지 못한다 라고 알 수 있을건데

이는 최초 프로젝트가 iOS13으로 지정되어 자동생성되었는데 저희가 iOS11.0으로 타겟을 낮췄기에 발생한 오류입니다. 

이제 이러한 자동생성된 부분을 삭제하여 정상적으로 빌드되도록 해보겠습니다.

Command + 1 키를 누르거나 실행버튼 아래의 폴더버튼(현재 파란색으로 선택되어있는 폴더 아이콘)을 누르면 가장 처음 프로젝트를 실행했을때의 좌측영역화면으로 돌아가게 됩니다.

여기서

자동생성된 파일중 SceneDelegate.swift를 선택하고 키보드의 Delete키를 눌러주세요.

그러면 이러한 창이 뜨는데 여기서는 Move to Trash로 파일자체를 삭제해줍시다.

그후 info.plist를 선택하셔서 들어간후 내부의 Application Scene Manifest를 선택하시고 키보드의 Delete키를 눌러주세요.

이제 마지막입니다!

좌측영역에서 AppDelegate.swift를 선택하시고 위 사진처럼

class AppDeleagte 아래에 var window: UIWindow?를 추가해주시고 

맨위에 있던 func 의 가로가 닫아지는부분 의 뒷부분에 있는 항목을 다 지워주세요.

그럼 최종적으로 남아있어야될 부분은 아래와 같습니다.

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return true
    }
}

위 사진의 보라색 동그라미 안에 있는부분, xcode의 실행하는 대상을 선택하는(Set the active scheme) 부분을 마우스로 눌러주세요

위의 사진과같이 기본적으로 설치되어있는 앱을 실행할 수 있는 기기들의 목록이 나오게됩니다.

여기서 iPhone 11을 선택해주세요.

그후 키보드의 command + R 을 누르시거나 xcode 상단의 재생버튼을 눌러 빌드를 해줍시다.

그리고 잠시기다리시면

이전에는 Build Fail이라고 뜨던 메시지가

이젠 Build Successes 라고 뜨면서 

위의 사진과같은 시뮬레이터가 켜지게됩니다.

위사진은 검은색화면이나 이는 다크모드때문에 기본바탕색이 검은색이 된것이지 하얀화면으로 뜰수도 있습니다.

이제 앱을 만들기위해 기본적은 세팅은 완료했습니다!

다음 포스트에서 이제 본격적으로 앱 만들기를 시작해봅시다

이제 막 iOS 개발에 손을 대고자 하는 분들을 위해 아래의 영상에서 나오는 스톱워치를 만드는 튜토리얼을 시작해보려고합니다.

일단 개발을 위해 필요한 준비물은

xcode11이 설치되는 macOS 10.14.4 버전 이상의 맥PC,

그리고 애플 계정입니다.

튜토리얼에서 만들앱은 xcode에서 제공해주는 시뮬레이터로만 돌릴것이고 개발자계정(유료)은 없어도 학습이 가능합니다.

단, 학습용이라고 할지라도 애플계정은 필요해요

맥을 구입하셨고, 처음 사용자세팅을 완료하셨다면 분명 다들 애플 계정이 있을꺼라 생각됩니다.

macOS 10.14.4 이상으로 제한한 이유는

swift5의 컴파일러를 사용하기 위해서입니다.

실제로는 그 이하 버전이라도 개발은 가능해요

그리고 위에서 말씀드린 실행영상입니다.

이 영상은 시뮬레이터(iphone11, ios13)의 화면이에요.

기본, 라이트 모드에서의 동작화면 

다크 모드 화면

우선 위에 영상에서 나오는 앱의 기능을 정의해야합니다.

1. 분,초, 1/10초의 시간 표시가 되어야합니다. 이는 물론 스톱워치 기능을 시작하면 실시간으로 시간이 표시되어야하죠.

2.  랩타임을 기록하고싶습니다. 스톱워치면 당연히 있어야겠죠?

3. 언제든 스톱워치를 처음상태로 돌아가는 리셋기능도 만들어주세요!

4. 요즘 ios13에는 다크모드라고 검은색버전도 있던데 지원가능하게해주세요!

그렇게

요청사항은 크게 4가지가 되겠습니다.

그럼 다음 포스트는 프로젝트를 만드는것으로 만나뵙겠습니다 ㅎ