[42Seoul] 2023 Hackathon 전체 1등 달성! 관련 회고록

2023 Coalition Hackathon에서 전체 1등을 달성하였습니다 !

• 언제: 2023/03/13~22.
• 어디서: Coalition Hackathon에서.
• 누가: 42Box Team.
• 어떻게: Cluster(교실)안에서 돌아가는 App으로
• 왜: Cadet(학생)들의 불편함을 해소시켜주고자.
• 무엇을: macOS App으로 42Seoul의 유용한 웹사이트들을 모아서 띄워주는 App을 개발하였습니다!
• 달성: 많은 카뎃들의 성원에 힘입어 코알리숑 내부에서 1등 그리고 전체 해커톤에서 1등을 달성하였습니다!
• 맡은 역할: macOS 앱 개발
• 42Box macOS App Link!

 

Coalition Hackathon(코알리숑 해커톤) 개요

• 주제 : 42서울에 필요한 서비스 제작
• 참가인원 : 총 57명
• 진행방식 : 3인 1팀 혹은 4인 1팀으로 구성하여 7일 동안진행 후 2일간 심사
• 심사방식 : 1차, 2차 별도
  • 1차: 4개의 코알리숑(건/곤/감/리)별 우수팀 선정 
    - 코알리숑 내부 유저들(약 340명) 에게 먼저 투표 받아, 코알리숑 1등을 뽑음.
  • 2차: 우수팀 가운데 최고우수팀 선정
    - 우수팀가운데 전체 유저들(약 1400명)의 투표를 거쳐 전체 1등을 뽑는 방식.

 

출품작 주제 선정

2023 Coalition Hackathon의 주제는 42서울에 필요한 서비스 제작이었는데요.

  주제 선정을 위해 아이디어 회의를 하던 중, 제가 개발 진행 중이던 macOS앱들이 불현듯 떠올랐습니다.
그리하여 여태까지 준비해 왔던 42SeoulRunPackageV1, V2을 꺼내 들게 됩니다. (하단 개발진행 과정에서 상세한 내용 첨부)
제가 42서울생활하면서 불편했던 점들을 설명하고 이 앱을 만들게 된 이유와, 현재까지의 진행과정, 그리고 앞으로 어떻게 하면 좋겠다는 말들로 팀원들을 잘 설득해서 다른 쟁쟁한 아이디어들을 제치고 macOS 웹앱 플랫폼을 선정하게 됩니다. 

  매우 유용하지만, 개발팀이 모두 다르기에 웹사이트들이 각각 흩어져 있어, 개인이 알아서 찾아들어가야 하는 점이 매번 불편하다고 느껴졌습니다. 어떤 서비스가 있는지 알기 어렵기도 하고요. 42서울에 참여하며 도움이 되고 유용한 사이트들이기에, 카뎃들이 한 번에 보고, 한 번에 들어갈 수 있는 플랫폼이 필요하다고 생각했습니다. 

결론적으로 매번 내가 알아서 찾아 들어가야 하는 42서울의 웹사이트들을 한 번에 들어갈 수 있는 macOS웹앱 플랫폼을 만들기로 했습니다.

macOS web app 

• 기본적으로 모든 cadet들이 이용하는 intra
• 42서울에는 카뎃들이 주도적으로 개발하는 다양한 서비스의 웹사이트들
  
  • 도서관 홈페이지 42집현전
  • 학습시간을 알려주는 24HANE
  • 많은 사람들의 과제, 개인 프로젝트 지식이 모인 팔만코딩경
  • ...

 

"클러스터 맥에서 작동하기" 까지의 개발 진행 과정

42서울생활하면서 주도적으로 틈틈이 준비를 해왔던 42SeoulRunPackageV1, V2입니다. 
https://github.com/chanheki/42SeoulRunPackageV1 , https://github.com/chanheki/42SeoulRunPackageV2
이 녀석들입니다. 하나는 완전 UI가 레거시(Legacy) 그 자체인 앱이고, 하나는 완전 SwiftUI로 이루어진 최신 언어 앱이었습니다.

(left) V1 / (right) V2

우선 제일 먼저 해야 할 것은 Cluster Mac에서 V2의 작동 여부 판단이었습니다. 달려가서 확인해 본 결과 모든 클러스 맥의 버전은 10.15...
SwiftUI의 MenuButtons들은 'MenuButtons' is only available in macOS 11.0 or newer라며 빨간 줄을 뿜으면서 저를 위협했습니다. 보통 migration은 더 나은 방법으로 업그레이드하기 위해 사용하지만, 저는 해당앱을 downgrade migragtion 하기 위해 계속해서 찾아본 결과 SwiftUI로는 앱을 만들 수 없다 판단을 내리고, V1에서 V2의 view를 UIkit로 재구성하는 방법으로 가닥을 잡았습니다. 

macOS target을 10.15 버전으로 Downgrade Migration을 위한 여정을 출발하게 됩니다. 

---

MVC 구조를 기반으로 해서 앱을 차곡차곡 쌓아 올렸습니다. 채택 이유는 아래와 같습니다.

1. Model (데이터와 비즈니스 로직)

• URL model: URL 데이터를 저장하고, 해당 데이터를 처리하는 로직.
• Menubar model: Menubar에 관한 상태를 관리하는 데이터와 로직.

2. View (UI와 화면에 보여지는 부분)

• Menubar: Menubar는 화면에 표시되는 부분. 상단 탭에 애니메이션.
• Button: url 버튼 들...

3. Controller (입력 처리와 로직 연결)

• Button: 클릭 시 특정 URL 불러오기 로직
• EventMonitor: 사용자 행동을 모니터링(CPU를 모니터링 하고 그에 따라 Menubar의 애니메이션을 갱신.)

많은 기능들을 요구하는 것도 아니고, 기능별로 명확하게 분리가 가능하여, 구조를 한눈에 알아보기 쉽게 하기 위하여 채택하였습니다.

---

Singleton Pattern의 활용.

• WebViewModel 같은 경우에는 하나의 인스턴스만 유지하도록 하여 메모리 자원을 절약하고, 데이터 일관성을 유지할 수 있는 이점이 있어 채택하였습니다.

---

Appdelegate

• Appdelegate를 통하여 app의 lifecycle에 따른 명령을 수행, 관리합니다.
• EventMonitor를 사용해서 유저 행동을 모니터링하고 이에 맞춰 해당 기능의 역할을 수행합니다.

---

Logic

• CPU : host_cpu_load_info의 cpu ticks 받고 그 값을 지속적으로 넘겨줍니다. 해당 사항은 비동기로 진행됩니다.  
• URL : Struct로 관리하며, Dictionary 구조를 사용 hash value로 관리합니다. hash이기 때문에 접근, 사용이 빠릅니다.
• WebKit : Hash에 담긴 웹페이지들을 앱실행과 동시에 DispatchQueue로 로드시킵니다. 이후 접근에서도 비동기로 사용합니다.
• Menubar App: 어느 화면에서도 접근할 수 있게 상단 바에 속하게 만들었으며, 사용자 환경에서 CPU사용량을 감시하여 보여주는 기능이 존재합니다.

---

UI 관련 사항

• CPU : 사용량에 따라 Menubar icon frame을 적절히 나타내어 Animate 합니다.
• Autolayout : MacOS를 타겟으로 하여 10.15 버전 포함 이후로는 전부 작동이 가능하여, 13", 14" 뿐만 아니라 iMac 최소 24" 환경에서의 View가 올바르게 표시되도록 Autolayout을 세심하게 적용했습니다.
• Menubar icon UI : v1부터 쌓아온 경험으로 깔끔하게 표현 가능하게 구현했습니다.
• Button UI  : Team 내부에 우수한 디자이너가 있어서 custom img button도 구현이 가능했습니다.
• Pin : NSSwitch의 NSLayer를 사용하여 switch방식(밀어서 닫고 열리는 버튼)으로 구현하려고 하였는데, 10.15 버전에서는 구현이 쉽지 않아서 기본 button의 toggle로 사용하였습니다.
• Quit : NSApplication.terminate(_:)

---

결과

• 다른 사람들의 반응
  - 실질적으로 여태까지 이런 앱이 없었기 때문에 호평을 많이 받았습니다.
  - 저와 같은 불편함을 갖고 있는 사람들이 많았고, 이를 해소시켜준 아이디어와 구현된 앱의 디테일함에 많은 호평을 받았습니다.
  - 앱 사용에 있어서 불편한 점들을 피드백으로 받았습니다. (단축키, 유저가 원하는 버튼(URL)삽입)
• 실제 사용
  - 간간히 클러스터에서 사용하시는 분들이 보입니다.
  - macOS 깃허브 페이지 방문자 카운팅이 2000을 넘었습니다.

 

느낀 점

• 저 자신을 포함하여 주변 카뎃들이 불편함을 느꼈던 부분을 해결할 수 있는 아이디어를 구현하였다는 점이 만족스러웠습니다.
• iOS/macOS를 공부하며 개발 진행중이던 앱을 수차례 디벨롭하여 결국 출시하였다고 볼 수 있습니다.
  제가 이전에 썼던 코드들을 되돌아보면서 리팩토링을 진행해 좀 더 좋은 코드로 표현해 나갈 수 있었습니다.
• 하나의 웹뷰 킷을 사용하지 않고 여러 개의 웹뷰를 사용하여 개별적으로 버튼을 동작하게 하였고, 핀박스를 이용해 고정할 수 있는 기능 등 디테일한 부분을 놓치지 않아 당장 출시해도 사용가능할 만큼 완성도를 높였다는 점이 해커톤에서 좋은 평가를 받은 부분이라고 생각합니다.  
• 앞으로의 기능 개발과 유지보수를 통해 클러스터에서 슬랙을 대체할 앱으로 발전했으면 좋겠습니다.

 

협업에서 느낀 점

• 기획 단계에서 제 아이디어를 적극적으로 어필하는 과정에서 각 팀원들이 각자 최대한 빛날 수 있는 역할을 잘 분배하고 원활한 의사소통을 통해 원만한 합의를 이끌 수 있었습니다.
• 가장 만족한 점은 디자인을 할 수 있는 개발자가 있었고 원활한 의사소통이 이루어졌기 때문에 더욱 완성도가 있는 앱이 되었다는 것입니다.
• 협업에서 가장 어려웠던 점은 팀 프로젝트 진행 상황이 기대했던 만큼 퍼포먼스가 나오지 않았던 상황입니다.
• 어려운 상황을 이겨내기 위해 취한 방법은 한정된 자원과 시간 내에서 우리가 할 수 있는 최선을 진행하는 것이었습니다.
• 추후에 추가작업을 통해 포기했던 부분을 보완할 수 있게끔 설계하였습니다. 해커톤 만을 위한 앱이 아니라, 실제로 목표를 가지고 개발하는 앱이라는 책임감을 잃지 않을 수 있었습니다. 
• (예시 : 서버에 올리지 않고 로컬에서의 API 작동. 로컬에서 FE <-> BE 기능을 가능하게 하였습니다. 이 점으로 미루어 보아 서버에 올리기만 하면 된다고 생각합니다.)
• 목표로 한 macOS앱 기능을 먼저 최대한 빨리 구현한 후 FE팀과 같이 문제를 고민해봤어야 했다고 생각합니다.

 

이번 해커톤에서 아쉬운 점

• 플랫폼뿐만 아니라 우리만의 자체 웹 서비스가 있었으면 좋겠다고 생각했습니다.
• macOS <-> BE의 서비스가 있으면 좋겠다고 생각합니다.
• 서버에 FE와 BE를 서버에 올리지 못해서 동적페이지를 못만들었던게 너무 아쉽습니다.
• 이번 해커톤을 통해서 실 사용하는 앱으로 나아가기 위해서 많은 준비가 필요할 것 같습니다.

 

보완점

• 현재 macOS는 지속 개발중입니다. 업데이트 예정사항
• 클러스터에서 실행할 수 있는 script 실행 기능이 추가될 예정입니다. (예. cache clean script)
• 클러스터 안에서 슬랙에서 가시적으로 활용하기 힘든 문제들(예. 스터디 모집)에 대한 기능 개발 예정입니다.

---

그 외 궁금하시거나 문의사항있으시면 편하게 연락주시면 됩니다.

혹은 github의 discussion에 의견 남겨주시면 답변드리겠습니다!

macOS App Link

GitHub - 42Box/macOS: macOS

 

 

실제 앱 구동 모습

동작 예시 동영상

42BOX.mp4

6.02MB

 

 

다크모드

받은 업적

받은 칭호