WWDC23 Swift Student Challenge 참가 후기

https://developer.apple.com/kr/wwdc23/swift-student-challenge/

WWDC23 Swift Student Challenge

매년 열리는 WWDC의 스페셜 이벤트, Swift Student Challenge이다.(이하 SSC) 이게 있는지 이번에 처음 알았다. 3월 30일에 wwdc가 열린다는 소식을 보고, 들어가서 봤는데 우연히 챌린지를 접하게 되었다. 조금 찾아보니 매년 하고 있었는데, 작년에 애플 디벨로퍼 아카데미 1기에서 우승자를 11명이나 배출했다고 한다. 잠깐 호기심이 생겼지만 3학년 과제가 조금 벅찼고, 유어슈 iOS 리드 일도 해야하며, 중간고사 기간이 이미 시작된 타이밍이었기 때문에 그냥 넘길까 고민을 많이 했다. 이왕 찾아보는거 조금 더 찾아보자는 마음으로 이리저리 찾아봤는데, 역대 우승작들을 모아둔 깃헙 레포가 있었다. 
https://github.com/wwdc/2022

GitHub - wwdc/2022: Student submissions for the WWDC 2022 Swift Student Challenge

Accepted 표시 된 프로젝트들이 전부 winner들이다. 몇몇 프로젝트는 충분히 기발하고 멋진 작품들이었지만, 대부분 퀄리티가 그렇게 높지 않았다. 흠 이정도면 나도 할 수 있겠는데? 생각이 들었다. 그러면 아이디어만 한번 내볼까?

하지만 생각보다 아이디어 내기가 쉽지 않았다. 

기술적 성과, 아이디어의 창의성을 주로 본다는 건데, 정작 주제는 알아서 정해야 한다. 앞선 작품들의 주제도 매우 다양해서 그냥 먼저 내가 좋아하는 것, 또는 잘 하는것이 무엇인지 찾아보았다. 그 분야에 대해 어떤 것을 연출/표현하고 싶은지 생각해봤다.
하지만 결과는 실패였다. 게임, 알고리즘, 노래방 등등 에 대해 어떤 것을 어떻게 접근해서 어떻게 표현할 것인지가 너무나도 애매했다.

시간은 하염없이 흐르고, 4월 4일 쯤 버스를 타고 학교로 가면서 우연히 창 밖을 보게 되었다. 창 밖으로 하늘이 보였다. 문득 얼마만에 하늘을 본걸까? 라고 생각을 했고, 너무 스크린 속만 들여다보면서 살았던 나 자신을 발견하게 되었다. 그때 아, 이거다 싶었다. 바로 아이디어를 구체화 했다. 유저들로 하여금 스크린 속이 답답하다라는 것을 느끼게 하고, 가끔 하늘을 쳐다보면서 힐링하라는 메세지를 담은 앱을 개발하자! 라는 아이디어를 도출했다.

4월 8일에 첫 삽을 떴다. Swift Playground를 써본적이 단 한번도 없어서 이리저리 막 만져봤다. 마침 SwiftUI 공부하고 있던지라 코드 자체는 익숙했지만 개발 환경이 생각보다 불편하고 버그도 많았다. ㅠㅠ. 그래도 주말 하루동안 첫 화면을 완성했다. 하지만 시험기간이 겹쳐서 남은 주말엔 시험 공부를 조금 했다.

평일에도 계속 아이디어를 수정하고, 구체화 하는 작업을 진행했다. 지하철, 버스로 통학하는 시간에 계속 생각하면서 어떻게 표현하면 좋을지, 무엇을 부각시키는 것이 좋을지 계속 생각했다. 한가지 어려웠던 점은 도대체 어디까지 구현할 수 있을지 전혀 모르겠다는 것이었다. 2D 게임으로는 SpriteKit을 사용하는 사람이 많아서 이걸 해보려고 했지만, 처음하는 사람 입장에서는 이게 어느정도 시간이 걸릴지, 난이도가 어떻게 되는지 전혀 모른다. 기획자들의 마음을 십분 이해했다. (결국 난이도가 생각보다 높았고, 시간도 많이 부족해서 처음 기획했던 모든 게임 scene들은 다 갈아엎어졌다 ㅠ)

Scene별로 제목을 붙여서 어떤 흐름으로 지나갈지 대충 결정했다. 피그마로 그리기도 생각해봤지만, 시간이 많이 뺏길 것 같아서 관두고 노션에다가 글로만 정리했다. (나중에 이걸 조금 많이 후회했다. 피그마로 먼저 그리고 기획 정비할껄..ㅠ) 

대충 이런 느낌으로 기획을 했다. (전체는 노션에 꽤 길게 있지만 보여주기 매우 부끄러운 말 그대로 날것의 페이지라 공개할 수 없다. ㅎ.. ) 처음엔 우리가 살아가는 현장을 창문을 통해 일부분만 보는 느낌을 원했지만, 나의 눈물나는 디자인 감각이 발목을 잡았다. 도대체 우리가 살아가는 현장을 어떻게 나타낼 것인지, 배경은 어떻게 그리고, 어떤 현장을 원하는지, 어떤 사물이나 사람이 있을지, 어떻게 움직일지 모든 것을 영상이 아닌(25MB 제한이 있다) 사진과 코드로 그리기 위해 어떻게 해야하는지.. 등을 구체적으로 고민하기 시작하니까 답이 안나왔다.
그래서 찾은 대안이 우리가 살아가는 세상을 간접적으로 표현하고, 그걸 창문을 통해 보는 방식을 선택했다.

그럼 우리가 살아가는 세상은 어떻게 표현할까? 이것도 엄청 어려웠다. 사람을 집어넣는 순간 이목이 사람에 집중되기 때문에 기각했다. 움직이는 것도 생각해야 하고. 사람 없는 세상은 자연환경밖에 떠오르지가 않았다. 그리고 자연환경 하면 사계절이다. 한국의 4계절을 우리가 살아가는 세상으로 비유하고, 이를 창문을 통해 보면 되지 않을까? 해서 봄, 여름, 가을, 겨울을 나타내고자 했다. Spring, Summer 등 계절의 이름을 바로 쓰면 우리가 살아가는 세상이라는 느낌이 들지 않을 것 같아서 Flowery Day, Rainy Day 등 일상과 밀접하게 연관지을 수 있는 네이밍을 사용했다.

봄 - 꽃이 흩날리는 계절
여름 - 비가 많이 오는 계절
가을 - 낙엽이 우수수 떨어지는 계절
겨울 - 눈이 많이 오는 계절

이렇게 나누고 SpriteKit 작업을 진행했다. 생각보다 오래된 프레임워크에도 불구하고, 자료가 진짜 정말 너무 없었다. 죄다 영어 강좌에 버전도 많이 안맞고, 심지어 챗지피티도 spritekit만 물어보면 말썽이었다. 그래도 꾸역꾸역 잘 찾아서 입문을 한 다음 중요해보이는 공식 문서들을 대충 훑어봤다. 영어 실력이 (매우) 모자라서 시간은 오래 걸렸지만, 역시 공식 문서만큼 정확한게 없다. 

기술적으로는 다양한 문제들이 있었다. 그 중 골탕먹었던 대표적인 친구들을 나열해봤다.
(1) SwiftUI 애니메이션
(2) 사진, 음악 리소스 이용하기
(3) SwiftUI와 SpriteKit 화면 비율
(4) SpriteKit으로 물결 모양 그리기 (실패. SwiftUI로 대체)
(5) 창문 구현하기
(6) 창문에 드래그 제스쳐 붙이기
(7) 창문 안쪽 구역의 tap 이벤트를 spriteKit에 정확한 좌표로 전달하기
(8) mac에서는 잘 돌아가는데 iPad에서는 안돌아감.
(9) 저작권 문제

(1) SwiftUI 애니메이션
아직 SwiftUI로 이제 막 VStack 쌓고 있을 시기라 애니메이션에 대해 깊이 공부해보지 않았다. 거의 모든 뷰에 모든 요소마다 다 들어가야 하는데, 이걸 컨트롤하기가 생각보다 까다로웠다. 코드 순서에 따라 결과가 많이 달라지고, 프리뷰 할 때랑 실행해서 돌렸을 때랑 적용되는 애니메이션이 다른 경우도 많았다.. 그래도 많이 사용해보고, 공식 문서도 많이 참고해보면서 자연스럽게 진행되도록 많이 개선했다. (하지만 아직도 많이 부족한 것 같다. ㅠ)

(2) 사진, 음악 리소스 이용하기
playground 버전이 올라가면서 기존에 리소스로 퉁쳐졌던 사진과 음악이 사진은 항목으로, 리소스는 음악으로 들어가면서 경로를 다르게 잡아줘야했다. 하지만 이렇게 다 해놓고 나니 (8)번 문제가 같이 터졌다. 아.... 이건 좀 이따가 썰을 풀어보겠다. 용량도 25MB밖에 안되어서 사진도 막 집어넣을 수 없었다. 사진마다 크기도 다르고 화질도 다 가지각색이어서 일일히 다 조정해주었다.

(3) SwiftUI와 SpriteKit 화면 비율
SwiftUI에서 SpriteKit을 실행시키려면 Wrapper가 필수로 있어야 한다. 그 도중에 뷰의 크기를 전달시켜줘야 하는데, 잘못 전달해주면, 이미지마다 비율이 다 엉망 진창으로 나와서 고민이었다. 결국 SwiftUI 쓸 때는 전체 화면을 다 사용하고, SpriteKit를 사용할 때는 1:1 정사각형 화면 비율로 실행되도록 했다. 그림이 안예쁘지만 화면에 따라 모든 에셋과 배경이 늘어나고 줄어나는 바람에 (해결 방법은 아직도 모른다) 1:1로 고정했다.

(4) SpriteKit으로 물결 모양 그리기 (실패. SwiftUI로 대체)
Rainy Day에 물결 모양을 넣어서 비가 오면 파도가 치면서 물이 차오르는 형태로 구현하고 싶었다. spriteKit에서 실제로 물과 비가 닿으면 조금씩 올라가는 형태로 자연스럽게 나타내고 싶었지만 파도를 그리는 코드를 도저히 못찾겠어서 (지피티 친구도 모른다), 어떻게 sine wave를 그려도 이 적분 영역을 채우는 것도 정말 모르겠어서 결국 SwiftUI로 파도는 따로 구현을 했다. 다행히 SwiftUI로는 코드가 공개되어 있어서 참고를 많이 했다.

(5) 창문 구현하기
핵심 기능 중 핵심이라 포기할 수 없었던 기능이었다. 배경은 사실 이미지 하나 넣어두고 퉁 쳐도 괜찮다고 생각은 했지만, 이 화면을 좁게 보는 기능은 기획에서 절대 뺄 수 없었던 기능이다. 근데 너무 어려웠다. blendmode라는 함수를 처음에 어떤 키워드로 검색해야 하는지 전혀 몰랐고, SwiftUI에서 mask를 사용하는 방법 이런거를 계속 찾아보고 있었다. 너무 어려워서 그냥 가운데가 뚫려있는 PNG 이미지를 활용할까도 생각했지만 그건 진짜 좀 아닌 것 같아서 이리저리 많이 찾아봤다. 결국 코드를 찾았고, blendmode라는 힌트를 얻어서 검은 배경 두개를 올리고, blendmode로 교집합을 제외했더니 가운데가 투명해지는 뷰가 완성되었다.

(6) 창문에 드래그 제스쳐 붙이기
창문은 어찌됐든 작은 직사각형 뷰이기 때문에 제스쳐를 붙이는건 사실 큰 어려움이 없었다. 다만, 드래그 기능을 넣을지 말지도 고민을 조금 했다. 진짜 드래그가 없으니 너무나도 답답해서 앱을 종료시킬 것 같았다. 드래그를 할 수 있으니 그래도 구석구석 어떤 것이 있는지도 대충 알 수 있었다.

(7) 창문 안쪽 구역의 tap 이벤트를 spriteKit에 정확한 좌표로 전달하기
이게 진짜 엄청 큰 문제였다. tap이벤트는 분명히 SwiftUI 뷰에서 일어나게 된다. 하지만 이에 대한 반응은 배경인 SpriteKit에서 일어나게 된다.
처음 생각한 솔루션은 제스쳐 무시였다. tap 이벤트를 전달받으면 가장 상위 뷰가 흡수하지 않고 무시하면서 다음 뷰로 전달될 수 있게끔. 하지만 이렇게 하면 드래그 제스쳐가 인식을 안할수도 있고, 코드도 매우 길어진다. 모든 뷰에 적용해야하기 때문에..
그래서 결국 생각한 솔루션은 tap 이벤트를 받으면 갖고있던 SpriteKit Scene 객체의 tap 이벤트를 실행하는 것이다. 정확히 말하자면, SpriteKit Scene에서 tap이벤트가 발생되면 핸들링하는 함수와 별개로 터치 시 실행할 로직을 정의한 함수를 public으로 해둔 다음, SwiftUI에서 발생한 탭 정보와 함께 이 함수를 실행하는 것이다.
또 하나의 큰 문제가 있다. 비율과 좌표 축이 다르다. SwiftUI는 사용자의 화면 비율에 따라 유동적으로 바뀐다. 크기도 바뀌고 비율도 바뀐다. 하지만 SpriteKit의 Scene은 사용자의 화면 너비, 높이 중 min값을 1:1 화면 비율로 갖기 때문에 인식하는 범위도 바뀌고 0이 의미하는 좌표도 서로 다르다. 또한, SpriteKit Scene은 오른쪽 아래가 (0,0)이지만, SwiftUI는 왼쪽 위가 (0,0)이기 때문에 이것도 맞춰주어야 했다. 핵심은 SwiftUI와 SpriteKit Scene의 x좌표이다. 이 x좌표의 델타값에 따라 SwiftUI에서 좌표랑 SpriteKit Scene에서의 좌표값을 정확히 일치하게 조정할 수 있다. 따라서 SwiftUI Geometry Reader를 통해 값 계산을 하고, SpriteKit Scene에서 실행하도록 했다. 계산하느라 진짜 진땀 뺐다. 와..

(8) mac에서는 잘 돌아가는데 iPad에서는 안돌아감
다 하고 테스트하려고 iPad에서 똑같이 다운받아서 실행했는데 알 수 없는 에러가 발생했다고 계속 뜬다. 아니 너가 알 수 없으면 내가 어떻게 아냐고...
이 때부터 계속 삽질을 했다. 내가 파악하기로는 두 가지였는데, 첫번째로 음악이 문제였다. 리소스에 따로 음악이 들어가면 iPad에서 읽을 수 없다. 두 번째로 너무 큰 사진 파일이 문제였다. 이미지도 컴파일 할 때 최적화때문에 하나의 파일로 만든 다음 이걸 영역별로 쪼개서 읽는 방식이라고 어디서 들은 것 같은데 그거때문에 생긴 문제인 것 같다. 143x143짜리 사진과 5800x5800짜리 사진이 같이 존재했는데, 용량은 비슷한 경우가 있었다. 이런 경우에 내부적으로 문제가 생기는 것 같은데 이걸 처음에 어떻게 아냐고... 이제 내가 컴파일러보다 똑똑한건가?
정말 엄청난 삽질 끝에 겨우 찾아냈다. 프로젝트만 5번 다시 지웠다가 다시 해봤다가 Xcode로 만들어봤다가, playground에서 만든걸 Xcode로 열어봤다가, 되는사람꺼 찾아서 전부 분석한 다음 Contents.json 수정해봤다가 진짜 별의 별 짓을 다 해봤다. 사진도 다 조정하고 코드도 싹 다시 만들어보고..
어쨌든 잘 해결 되었으니 기간이 좀 지나면 미화 될 예정이다 ^~^

(9) 저작권 문제
다 하고 제출하려고 보니 저작권을 적는 공간이 있었다. 내가 사용한 리소스에 대해 전부 다 적어야 하는데 당연하게도 그냥 긁어온 입장에선 매우 난처했다. 모든 리소스를 다시 저작권 용인되는 사진으로 싹 바꿨다. 그 과정에서 음악도 전부 바꿨어야 했다. 원래 브금대통령이라는 사이트 추천받아서 음악을 다운로드 받았는데, 알고보니 공모전 제출용으로는 곡당 꽤 비싼 금액을 지불해야 한다고 했다. 하는 수 없이 다른 사이트를 찾아보다가 https://www.chosic.com/free-music/all/ 이 사이트의 저작권이 대체로 free하게 되어있길래 바로 둘러봤다. 맘에 드는 노래가 많이 없었긴 했지만 무료니깐 ^~^ 저작권도 표시만 해두면 되고 ^~^ 그냥 채택했다. 다시 리소스를 다 바꾸고 테스트까지 완료했다.

서류에 들어가는 항목인 교수님 연락처, 재학증명서, 기능과 사용 기술 요약, Beyond WWDC23 (If you've shared or considered sharing your coding knowledge and enthusiasm for computer science with others, let us know.) 이런것도 준비하는데 한 세월 걸렸다. 제출은 마감일인 4월 20일이 아닌 4월 17일쯤 제출했다. 왜냐하면 시험이 그 주에 4개가 몰려있었기 때문..

그래서 만들어진 결과물은 https://github.com/chongin12/Sometimes/ 여기에 업로드 해두었다.
유튜브는 https://www.youtube.com/watch?v=qT3PcCvPN44

완성된 결과물을 보니.. 조금 처참했다. 기획도 처참했고, 디자인도 처참했다. UI/UX 관련해서는 엉터리 그 자체다. 기술은 나름 진전이 있었다고 생각되지만 나머지 영역은 그냥 말아먹은 수준이었다. 이걸 계기로 저 영역들의 전공자가 괜히 있는게 아니라고 다시 한 번 뼈저리게 느꼈다. 그렇다고 이걸 포기할 수 없기 때문에 나는 애플 디벨로퍼 아카데미에 무조건 가야한다. T자형 인재.. 지금 이대로 성장하면 I자형 인재가 될 예정이니 그럴 순 없다. 저기로 가야한다.

https://github.com/wwdc/2023/pull/8

Adds "Sometimes" by Chongin Jeong (Submitted) by chongin12 · Pull Request #8 · wwdc/2023

23년도 wwdc 제출작 모아두는 깃 레포가 열렸길래 얼른 풀리퀘 걸어뒀다. 리젝먹으면 PR 보내기 애매하니 미리 걸어두었다 ^~^

사실 이 포스팅을 쓰는 이유는 아직 결과가 안나왔기 때문.. 5월 10일쯤 나오는걸 알고 있지만, rejected 먹을 확률이 90%이기 때문에 의욕 떨어질까봐 지금 써둔다. 어차피 이를 실패사례로 두고 내년에 찐으로 도전하면 되니깐! 그래도 실 개발 기간 9일 걸린 것 치고는 나름 의미있는 도전이라고 생각한다. 진짜 내년이 메인이다. 그 때까지 화이팅!!

 

--------------------------------

결과는 아쉽게도 탈락이다.

아쉽지만 다음 기회에~