Swift를 이용한 iOS 앱 클론 코딩 개요

리벤쿤·2024년 1월 15일

iOS 앱 개발

목록 보기
1/2
post-thumbnail

궁금해서 들어보기로 했다.

네카라쿠배 5개 앱으로 완성하는 iOS 앱개발 : 패스트캠퍼스
이제는 코딩 교육 관련 알고리즘으로 도배가 된 내 인스타그램 릴스가 계속 패스트캠퍼스 광고를 떠먹여줬다. 마침 새해 기념 대규모 할인 행사도 있었고, 추가로 들어보고 싶은 강의도 있어서 같이 구매했다.

지금은 게임 엔진과 데이터 사이언스와 관련된 분야로 공부하고 있지만, 저 강의 광고를 보고 문득 떠오른 사실이 있다. 처음 개발자라는 꿈을 가지게 된 이유가 아이폰 앱을 만들어보고 싶어서였고, 처음으로 코딩을 하면서 접한 프로그래밍 언어가 Objective-C였다.

당시에는 자료구조, 알고리즘이 뭔지도 모르는 초등학생 코흘리개가 겁도 없이 덤벼들었지만, 프로그래밍의 매운 맛을 보고 금방 깔끔하게 접었다. Objective-C가 배우기 어려운 언어라는 사실을 알게 된 건 내가 대학교를 입학하고 난 이후였다.

지금은 그래도 대부분의 애플 디바이스들의 앱을 Swift로 개발할 수 있도록 바뀌었다. 교육에도 용이하게 개발해서 간단하게 코딩할 수 있도록 만들었다고 한다. 전공 지식도 쌓였고, 이제는 해 볼만 하지 않을까 싶어서 다음 학기가 시작하기 전에 후딱 끝내보려고 한다.

이래놓고 정작 학과 수업으로 개설된 임베디드, 모바일 프로그래밍 관련 수업들은 한 번도 들어본 적이 없다.

Swift 기초문법

애플에서 출시한 모든 기기는 앱 개발을 위해 Xcode를 사용한다. Windows나 Linux에서는 제공하지 않으며, 오로지 Mac에서만 이를 이용한 앱 개발이 가능하다.

Xcode에서는 작성한 코드를 바탕으로 앱에 구현되는 화면을 실시간으로 보여주기까지 한다. Visual Studio나 IntelliJ 같은 일반적인 코드 작성 프로그램과는 목적이 다르다는 느낌이 들었다.

Swift에 대한 첫 인상은 모바일 UI 구현에 최적화된 HTML/CSS 였다. 굉장히 단순한 문법에 이게 되나 싶은 표현도 꽤 있었고, 클릭으로 UI의 기능을 생성하고 코드를 자동으로 작성해주는 것이 굉장히 편리했다.

화면 그리기

레이아웃

여러 면에서 웹페이지 하나를 만드는 듯한 과정이었다.

큰 틀의 구조를 잡고, 각 위치에 배치하고 싶은 요소(이미지, 텍스트, 버튼 등)의 코드를 넣고 배치하면 된다.

import SwiftUI

struct LayoutView: View {
    var body: some View {
        VStack {
            Image(systemName: "pencil")
                .resizable()
                .scaledToFit()
                .frame(width: 200)
            
            MyText(textName: "Text Element 1", textFont: .headline).bold()
            MyText(textName: "Text Element 2", textFont: .subheadline)
            MyText(textName: "Text Element 3", textFont: .body)
            
            HStack {
                MyButton(buttonName: "Button 1", buttonColor: .blue)
                MyButton(buttonName: "Button 2", buttonColor: .green)
            }
            Button {
                // action
            } label: {
                VStack {
                    Image(systemName: "arrow.right.circle.fill")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 50)
                    Text("Complex Button")
                }
                .foregroundStyle(.white)
                .padding()
                .background(.orange)
                .foregroundStyle(.white)
                .font(.headline)
                .cornerRadius(10)
                .bold()
            }
        }
    }
}

#Preview {
    LayoutView()
}

위와 같이 SwiftUI에 코드를 작성하면 프리뷰에 바로 내가 코딩한 화면이 나타난다. 마치 웹프로그래밍을 하는 것 같다. MyButton과 MyText는 설정을 미리 해둔 버튼과 텍스트를 구조체의 형태로 사용하는 것이다.

Xcode 우상단의 '+' 버튼을 누르면 내가 넣고 싶은 콘텐츠를 불러와 클릭해 삽입도 가능하다. 이를 적용하기 위한 코드가 자동으로 작성된다.

이런 식으로 아이폰 앱에서 자주 볼 수 있는 화면을 구성하는 연습을 진행한다. 이미지만을 보고 구조를 잡아보고, 원하는 화면을 만들기 위해서는 어떻게 코드를 작성해야 하는지를 꾸준히 연습한다. 새로운 개념이 필요한 경우에는 그와 관련된 설명을 짧게 진행하고, 대부분이 실습이다.

profile
컴퓨터공학 & 미디어콘텐츠, AI/ML, HCI, PM, QA

0개의 댓글