SwiftUI로 생애 첫 앱 만들기

앱 완성 모습

안녕하세요! 스위프트 입문자를 위한 생애 첫 앱 만들기를 해 볼 거예요!

 

준비물: 맥 (맥북) 컴퓨터, 엑스코드 앱

---

1.엑스코드를 실행합니다.

 

---

2. Create a new Xcode Project 를 선택합니다.

---

3. ios 탬플릿과 App 을 선택합니다.

 

---

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

4. 앱 이름을 영어로 만들어주세요. 저는 MyGanzi 라고 지었어요.

• 팀: none 으로 해도 되고요,
• 오거니지션 아이드니파이어: 웹사이트인데요, 따로 없으면 자기 이름을 영어로 만들면 돼요, 웹사이트가 "길동닷컴"이라면, 여기는 "닷컴길동" 이렇게 돼요.
• 번들 아이드니파이어: 자동 생성되고요
• 인터페이스: SwiftUI
• 랭귀지:Swift

체크박스는 비우고, Next 클릭합니다.

---

5. 첫 화면입니다. 제일 왼쪽 영역의 ContentView.swift 파일의 오른쪽 에디터 영역(영어 많이 있는 곳)에서 코드를 만들어 볼 거예요.

---

6. VStack 부터 .padding() 까지 지워주세요. (오류 메시지의 빨간 바가 생깁니다.)

---

7. body 아래에 Text ("Hello World!") 라고 타이핑해봅시다.  오른쪽 캔버스에 실행된 모습이 보여요.

 

---

8. import 아래에 enum Ganzi {case 이모티, 이모티, 이모티, 이모티} 넣어 줍니다.

    Struct ContentView 아래에 var selection: Ganzi = .이모티 적어 줍니다.

• 이모티콘창은 키보드의 컨트롤+커맨드+스페이스 입니다.
• Ganzi 대신 다른 이름으로 만들어도 돼요
• enum 경우들의 목록입니다. 정의 내려서 선택하는 역할을 해요. 예를 들어 비행기가 날고, 이륙하고, 착륙하고, 세금 걷고 하는 것처럼 정의 내려주는 리스트입니다.
• 각 이모티콘 사이 콤마(,) 뒤에 스페이스로 공간을 주어야 합니다.
• var selection: Ganzi = .이모티     는 이모티콘을 참고해요. 

---

9. enum Emoji 뒤에 : String 을 삽입해요. 스트링은 "헬로 월드" 처럼 화면에 렌더링 하는 것을 나타내요.

    Text ("Hello Wolrd")의 괄호 안 내용을 지우고, selection.rawValue 를 괄호 안에 적어 줍니다. 화면에 작은 이모티콘이 나와요.

 

---

10. .font(.system (size: 150)) 으로 이모티콘 사이즈를 키웁니다.

 

---

11. VStack 으로 원숭이 3마리 세로 쌓기를 해 보고 VStack의 역할을 알아봐요.

• body 아래에 VStack {}을 만들고, 이 괄호 안에 Text(selection.rawValue).font(.system(size:150))를 컨트롤+X키로 잘라 냈다가 , 컨트롤+V로 붙여 넣기를 3번 합니다. 

---

12. 다시 원숭이 한 마리로 돌려놓아요. 그다음 픽커를 만들어요.

• Picker("Ganzi", selection: $selection) 를 VStack 안의 Text 아래에 적어 넣어요.
• var selection: Ganzi =  .이모티 의 앞에 @State 접두사를 붙여요.
• enum Ganzi: String 뒤에 콤마(,) 그리고 CaseIterable 을 삽입해 주세요.
• 케이스 이 트러블은 반복(루프) 기능을 합니다.

중요! 달러표시 $ 와 @State의 관계
@State : 코딩하다가 뭐가 바뀔 때면, 자동으로 업데이트하라는 명령이에요.
$ 바인딩: 바인딩은 스프링 연습장의 철을 뜻하는 영어 단어예요. 엑스코드에서 달러표시는 State를 바인딩해요.
$selection 이란, 4개의 이모티콘 selection(선택)을 명령하는 이 바인딩을 참고하라는 뜻이에요.
selection은 특별한 데이터라서, 유저가 다른 이모티콘을 선택하면, Text, Picker를 바꾸어야 해요.

 

 

 

---

13. ForEach 사용해서 픽커를 완성해요. 작은 픽커가 나타나면 이제 거의 완성이에요.

Picker("Ganzi", selection: $selection) {
    ForEach(Ganzi.allCases, id: \.self) {
        ganzi in
        Text(ganzi.rawValue)
     }
}

==> 간지라는 이름의 픽커는, 셀렉션을 바인딩한다.
====> 모든 경우들 각각이, 스스로 특별한 식별자이며,
======> 간지는 그 이모티를 스트링 포맷에서 렌더링 한다.

 

---

14. .pickerStyle() 괄호안에 마침표 (.)를 찍으면 여러 개의 픽커 스타일을 고를 수 있어요. 저는 세그멘티드를 사용했어요.

 

피커 모양이 바뀌었어요

---

15. NavigationView {}로 픽커 스타일까지 안아 주세요. 괄호 닫은 아래에 .navigationTitle("당신은 무슨 띠 인가요?") 를 적어주세요.

---

16. 픽커의 양 끝이 화면에 붙어 있어 답답하네요. 픽커 스타일 아래에 .padding()을 사용해서 공간을 만들게요.

앱 완성!

드디어 생애 첫 앱이 완성되었어요!!

Note
struct ContentView_Previews: .........
이하는 미리 보기용 코드라서 오늘 앱을 만들면서 건드리지 않았어요.
만약 이곳을 지운다면, 미리 보기가 되지 않아요.