[WWDC24] Swift Student Challenge 회고 + 우승(Accepted) 🏆

2관왕에 성공했어요 🚀 따끈따끈한 회고

# 주제를 선정하게 된 계기

이번 주제는 작년에 아카데미에서 아이작의 '혼자서 앱 만들기' 세션을 하면서부터 구상한 내용이다. iOS 개발을 시작하면 무조건 접하게 되는 SF Symbols에 대해 다루었다. SF Symbol은 애플이 제공하는 심볼 이미지이고, 스위프트로 개발할 때 시스템명만 잘 적어주면 이미지를 따로 넣거나 가져오지 않고 코드 한 줄만으로 쉽게 사용할 수 있다.

2019년 첫 발표된 SF Symbols의 가짓 수는 2,300여 개 정도였고, 점점 늘어나 현재는 그 개수만 5천개가 넘는다.

그런데 여기서 쓰고 싶은 아이콘의 이름을 모르면 어떻게 찾을까?

1. 비슷한 단어로 계속 검색해본다
2. 카테고리를 이용해 찾는다
3. 일일이 찾는다

3단계까지 가면 눈알빠진다... 저러고도 못찾으면 직접 그리거나 구글링해서 이미지를 갖다 쓴다.

---

한 번은 '설정' 아이콘을 찾으려고 Setting으로 검색했는데 찾아지질 않았다. 나는 이때 막 안드로이드 프로젝트를 하던터라 검색결과창이 비어있는 게 무지 당황스러웠는데, 알고보니 안드로이드는 기능 중심, iOS는 형태 중심으로 이름을 짓는다고 한다. 그래서 위 사진에서 주로 '공유' 기능으로 쓰이는 저 아이콘의 이름은 share가 아닌 'sqaure.and.arrow.up'이다. (진짜 생긴 모양 그대로 씀..) 내가 찾고 싶었던 톱니바퀴 심볼은 'gear'였다. 그런데 재밌는건 share로 검색해도 저 심볼을 찾을 수 있다는 점. 왜 setting으로는 찾을 수 없었을까?

settings..까지 복수형으로 검색해줘야 나오더라. (이번에 스스챌하면서 깨달았다.. 거진 2년 만에야 깨달음..)

---

또 한 번은 팀프로젝트하면서 우리 디자이너가 '메뉴' 버튼으로 쓸 아이콘을 찾다가 없는듯하여 직접 그려서 보내줬었다. 그걸 보고 개발팀원이 SF Symbol을 쓰면 되는데 왜 그려서 줬는지 물어보니 찾아봤는데 없어서 그려서 보내줬다더라.. 팀원이 검색해서 찾아주니, 그 심볼을 보고 'grid'라고 하는지 몰랐다고 ..

라는 내용을 네컷만화로 그려보았습니다

생각보다 분류도 잘 되어있고 SF Symbol을 자주 쓰다보면 익숙해지지만, 그럼에도 간혹 찾기 어려운 심볼을 쓰고 싶을 때도 있고, 있을 것 같은데 없거나 없을 것 같은데 있는 경우도 있다 (?) 

여기서 찾을 수 있는 심볼이 몇 개나 있나요? 나는 0이었음 ... 진짜 ..

위 에피소드를 생각하면서 그려서 찾으면 참 좋을텐데... 왜 없지?라고 생각해서 만들어봤다. 없는 이유가 있었던 것을...

---

# 개발 과정

처음에는 그냥 단순히 아이콘 이미지를 싹 저장해서 적당히 blur나 rotate, 노이즈 추가로 데이터 증강하고 create ml 돌리면 뚝딱 나올줄 알았다. 그런데 이상하게 training 정확도도 70%를 넘지 못했고, testing 정확도는 반도 못미쳤다. 원인을 파악하기로는 깔끔하게 픽셀로 작업된 이미지와 달리 손그림 데이터는 PencilKit에서 제공하는 pen 타입이다보니 질감이 다르면 다른 레이블로 분류하는 듯 했다. 결과가 정말 이상하게 나왔다.

---

어떻게 할까 하다가 직접 그리기로 했다. SF Symbols는 각기 다른 모양의 아이콘이 5천 종류가 존재하는 것이 아니라 변형된 심볼이 굉장히 많아서 기본 형태만 필터링하면 2천개정도 남는다. 직접 그리다보니 방향이나 각도나 화질, 심볼 형태 자체가 거의 다 중요해서 따로 데이터 증강 파라미터를 사용하지 못했다. 한 종류마다 10개씩 데이터를 그린다고 쳐도 2만개정도 그려야 했음..

백개씩 늘려가면서 학습시키다보니 문자열이나 기본 도형이 정확도에 영향을 크게 미쳤다. 숫자 1이든 직선이든 특징을 제대로 잡지 못하다보니 직선이 포함된 다른 아이콘들도 정확도가 다 같이 떨어지더라. 그래서 문자열과 숫자를 포함한 심볼은 제외시켜버렸다.

그리고 사람모양이 포함된 figure도 정확도를 확신할 수 없어 제외했다. (야호 1000장 줄었다... 하하...)

이렇게 자잘한 심볼을 정리하고 세부분류를 모두 대분류로 포함시키고 보니 레이블이 500개정도 나왔다! 

상기했듯 CreateML에서 제공하는 데이터 증강을 사용할 수 없어서 나름의 방법으로 증강을 시도했다. 바로 누끼따기 ㅎ

배경이나 색깔도 특징을 인식하는 요소가 되기 때문에 누끼따는 것만으로도 정확도를 향상시킬 수 있었다. 손그림을 그리고 → 캡쳐하고 → 캡쳐본을 복붙하고 → 누끼따면 데이터 하나 완성 ㅎ

몇 번 반복해주면 레이블 하나 완성

---

모델 학습 과정은 가장 쉬웠다. 이미 애플에서 CreateML이라는 유능한 도구를 제공하고 있기 때문에 classification 모델을 선택해서 라벨링된 데이터를 담아주고 Run 버튼만 누르면 분류모델이 짜잔하고 나옴

최종 모델이 나올 때까지 21번의 학습을 거쳤다. 제출할 때 들어간 레이블은 506종류에 데이터는 9,146개..!! 무진장 많이도 그렸다. 이때 하루종일 트랙패드로 그림만 그리다보니 손목에 있던 물혹이 커져서 뽀올록 튀어나올 정도였다.

완전 만족스럽지는 않지만 train이나 validation 정확도가 어느정도는 잘 뽑혀서 제출했다! 특히 테스트 페이지에 예제로 담아둔 심볼들은 더 신경써서 데이터를 담았다. 심사하는 동안 정확도가 떨어지면 안되니까....

완성본! 그림판에 이름을 찾고 싶은 심볼을 그리고 SEARCH 버튼을 누르면 정확도 순으로 결과 산출 → 키워드 중심으로 검색되고, 해당 키워드가 포함된 심볼들이 리스트 형태로 보여지게 된다. 클릭하면 클립보드에 이름이 복사되어서 바로 코드에 작성할 수도 있다.

---

# 마무리하며

사실 공모전이 아니었다면 데이터 증강 노가다때문에 얼마든지 미뤘을텐데 실현할 수 있는 동기부여가 되었고, 진짜 해결하고 싶었던 문제를 해결할 수 있는 방법을 제시하게 되어서 너무 좋다! 더 쉽고 빠른 방법이 있었을 수도 있고, 데이터 노가다라는게 참 멍청한 방법인 것 같으면서도, 사실 그림만 그릴줄 알면 이런 프로그램도 뚝딱 만들 수 있다는 것도 보여주고 싶었다. 내가 직접 모델을 구현한 것도 아니고, 프로그램 자체에도 그림판과 결과를 띄워주기만 하면 됐으니까! 지금은 앱스토어에 앱으로 올라가있다. 데이터만든 시간을 생각하면 너어어무 아까워서 당장이라도 유료 앱으로 출시하고 싶었으나 사업자등록을 못하는 상태라 당분간은 무료인걸로 ✌️

---

데모 영상과 코드 남깁니다 💌

 

GitHub - dayo2n/WWDC24-Swift-Student-Challenge: [👑ACCEPTED] Submission for 2024 Apple scholarship