01. Xcode IDE 알아보기

HI. 난 UX/UI 디자이너 메리킴 👨‍🚒
회사에서 iOS의 신이신 개발자분에게 과외를 받기로 하였다.
(1년동안 미루다가 드뎌 시작함)

그리고, 오늘 개발자분들한테 velog가 핫하다는 얘기를 듣고
부랴부랴 만들었다. 사실 티스토리 UI는 제스탈이 아니였걸랑요

velog.. de"vel"oper와 b"log"의 합성어일까?
네이밍이 굉장히 맘에든다. 내가 iOS 글을 올리지않는다면..
다들 댓글로 독촉해주시길..

01. Xcode IDE는 뭔가?

Apple의 macOS, iOS, watchOS 및 tvOS용 소프트웨어 개발을 위한 IDE. 엑스코드라 읽으며, macOS 전용이다.

UI 디자이너는 안드로이드, iOS 상관없이 다양한 프로그램으로 디자인 할 수 있으나 안드로이드 개발자는 안드로이드 스튜디오, iOS 개발자는 Xcode를 통해 개발한다고 생각하니 조콤 쉬웠다. 필자는 앱등이니깐 Xcode가 좋다.

*02. Xcode 파헤치기 - Project Settings - General, Signing & Capabilities, Build Settings, Build Phases

• 참고하기 좋은 선생님 : https://cau-meng2.tistory.com/109

1. Project Settings

   • Xcode의 프로젝트 세팅은 UI 디자인 프로그램보다는 프리미어 프로와 비슷한듯하다. 전반적으로 프로젝트 기본정보 / 프로젝트 세팅 등이 들어가는 듯 하다.

2. Project Settings - General

   • Display name : 디자인으로 치자면 파일명인듯 (ex. 배민 앱 디자인_0708)
   • Bundle identifier : 약간 도메인 느낌? 도메인도 겹치면 안되듯 고유한 식별자를 가지고 있는 번들 아이덴티티.
   • Version : 말그대로 버전. 우리는 처음이니깐 1.0
   • Build : 그냥 말그대로 빌드

3. Project Settings - Signing & Capabilities

   • Signing & Capabilities : 전반적으로 디자인 프로그램에서 시리얼 등록할때의 화면과 비슷한 것 같다. 당신이 개인인지, 팀인지, Apple 계정을 가지고 있는지, 어느 팀에 속해있는지? (디자인 프로그램도 그렇고 어디 회사다니는지 궁금한가봄)
   • Team : 너가 무슨 팀에 속했냐
   • Provisioning Profile : 시스템 프로필 유형. 그냥 Xcode 고정이라 생각하자
   • Signing Certificate : 디자인에서도 있는진 잘 모르겠는데, 예시를 들자면 내 디자인파일에 Adobe XD design : Team mary (고유식별번호) 이렇게 디지털 ID를 만들어주는 느낌. 키체인과 인증서와 관련있다고 한다. 약간 공인인증서 개념인 것 같다.

4. Project Settings - Build Settings

   • Build Settings : 우리가 디자인하기전에 가로, 세로 사이즈와 해상도를 정하듯이 디바이스 설정값을 정하는 화면인 듯 하다. 디자이너는 UI를 디자인 한 후 프로토타입을 돌릴때 즉석으로 되는 경우가 많지만, 개발자들은 코딩을 한 후 프로토타입을 돌릴때 이 과정을 "빌드"라고 부르는 것 같다. 이 화면은 그 "빌드"에 대한 기준을 설정하는 듯 하다. (내용이 너무 길어서 생략하겠음)

5. Project Settings - Build Phases

   • Build Phases : 이 화면은 예를 들자면, 디자인할때 자동으로 생기는 파일들에 대해 설정해주는 화면인 것 같다. 일러, 포토샵은 해당이 안되지만 프리미어를 써 본 디자이너라면 난 분명 프리미어 파일 하나만 만들었을 뿐인데 쭈루룩 다른 파일이 생기는 광경을 봤을것이다! 그 파일들에 대한 기준을 설정해주는 화면인 것 같다.
   • Dependencies : 뭔소린지 모르겠다.
   • Compile source : Swift, Objective-c와 같이 호환가능한 소스 파일을 대상에 연결하는 거라고 한다. 디자인으로 치자면, XD에 Sketch, Figma 소스들이 호환되서 연결되는 느낌?
   • Link binary With Libraries : 다른 대상에서 생성된 라이브러리나, 외부 라이브러리를 연결시킬 수 있음. (디자인으로 치자면 외부 UI KIT?를 연결시킬 수 있다 치면될 것 같음)
   • Copy bundle resource : 리소스를 대상과 연결하고, 적절한 경우 제품 내의 하위폴더에 복사하는거라고 한다. 디자인도 폴더별 분리가 중요하지 않은가.. 원본파일 - 소스파일 - 폰트 / 이미지 파일 요렇게 대 - 중 - 소 분류를 뜻하는 듯 하다.

*03. Xcode 파헤치기 - Info.plist

• 참고하기 좋은 선생님 : https://velog.io/@twkim8548/iOS-개발을-시작해본다 (아니 잠만 우리회사 개발자분이였음 ㄴㅇㅁㅇㄱ)

  • Info.plist : 솔직히 뭔가 네이밍을 딱 봤을때 개발언어같아서 찾아보기 싫었는데 그냥 찾아봤다. 요약하자면 어플의 "권한"에 대한 정보를 모아서 볼 수 있는 화면이라고 한다.
    ex) - Application users Wi-Fi : Wi-Fi 사용여부

*04. Xcode 파헤치기 - Assets.xcassets - icon, image, color

• 참고하기 좋은 선생님 : https://woojin-hwang.github.io/xcode-asset/

  • Assets.xcassets : 간단하게 이 파일은 에셋을 모아논 파일이라 생각하면 편할 것 같다. 앱 아이콘부터 컨텐츠 (이미지, 아이콘..) 등을 모아논 파일이다. 디자인에서 우리도 소스들을 정리해놓듯 개발도 마찬가쥥~ 제플린에서 다운받아서 이 파일안에서 관리하시는 듯 하다. (에셋명이 깔끔하면 좋은게 이것 때문일까?)

*05. Xcode 파헤치기 - Interface - Storyboard, SwiftUI

• 참고하기 좋은 선생님 : https://blog.nerdfactory.ai/2019/06/09/wwdc-2019.html
  https://blog.sengwoolee.dev/108

  • Storyboard, SwiftUI : 이 개념은 바야흐로 2019년 WWDC에서 시작된 것 같다. (안맞으면 댓글점) 대체 Storyborard와 Swift UI의 차이점이 뭔데..?
    1) Storyboard
    Storyboard는 기존에 동시 협업을 할 경우 충돌이 있는 점이나 빌드가 어려웠나보다. 디자인으로 치자면, XD가 나오기 전 포토샵인 것 같다. 전반적으로 무겁고, 프로토타입하기도 어렵고, 레이어를 복사하는것도 오래걸리고, 무엇보다 동시협업이 거의 불가능하다는 점이 비슷한 것 같다.
    2) Swift UI
    Swift UI는 개발자한테도, 디자이너한테도 좋은 프레임워크인듯 하다. 실시간 미리보기를 제공하고, UI 호스팅 컨트롤러를 통해 UI Kit를 사용할 수 있다고 한다. 그리고, 무엇보다 Storyboard보다 빌드가 빠르다는 점이라고 한다. (프리미어인데 실시간 렌더링되는 그런 짜릿함같삼 심지어 영상 템플릿도 제공해주는 고런느낌)

*06. Xcode 파헤치기 - AppDelegate, SceneDelegate

• 이부분은 도저히 이해가 안가서 iOS 스승님께 물어보고 올 예정~

이 포스트 이후로 포스팅이 없다면 독촉 댓글 남겨주십시오.

독촉댓글 환👨‍🚒영🔥