[iOS] 솝커톤 후기, Client들이 해야할 일

인트로

SOPT인이라면 누구나(?) 하고싶어할 해커톤!
29기 솝커톤을 다녀오고나서 배운점을 기록하려고 한다.
이번에는 오프라인팀과 온라인팀으로 나눠서 해커톤이 진행이되었다.
나는 오프라인 iOS파트로 지원을 해서 아슬아슬하게 문닫고 참여할 수 있었다.
처음에는 내가 너무 감자인지라 괜히 참여해서 구현도 못하고 민폐만 끼칠까바 신청을 고민했다.
하지만... OB분들의 많은 응원과 격려 덕에 신청할 수 있었다..(슨배덜아 사랑해..🔥)

주제

이번 29기 솝커톤의 주제는 "공동체"였다. 공동체라는 단어가 가지고 있는 의미가 너무 강했던지라, 처음에는 아이디어를 떠올리기에 막막했었다. 어떻게 해야하지..? 고민하고 있을 찰나에 기획분들께서 바로 아이디어 브레인스토밍을 진행해 주셨다.

협업 툴인 '피그마'을 사용해서 아이데이션을 진행했다. 우리팀의 회의는 단순한 커뮤니티 기능이 아닌 새로운 것을 떠올려보려고 노력했다. [공익, 환경, 집단지성, 짠테크, 뒷담, 자기소개 ] 등과 같은 키워드들에 대해 파고 들어가며 각자 나름대로 상상한 서비스에 대해 이야기해보고 우리 모두가 만족할 만한 아이디어를 찾을 수 있었다.

공동체 속에서 만나는 사람들은 굉장히 다양한 성격을 지니고 있다. 공동체 속에서 잘 생활해보기 위해서는 다른 사람들의 성격을 존중해주고 이해할줄 알아야한다고 생각한다. 하지만 나와 다른, 사람들의 성격을 파악하고 그 사람처럼 살아보기는 쉽지않다. 우리는 이를 도와주기 위해 공동체 속에서 나와 다른 사람을 이해하고, 다른 사람의 캐릭터로 살아볼 수 있는 서비스를 생각했다.

서비스 소개

팀원들의 만장일치로 채택된 서비스의 이름은 "ME:EW" 다.
ME(나)를 뒤집어 EW(또 다른 나)를 살아보자! 라는 의미의 서비스다.
서비스의 한줄 소개는 '서로를 이해하기 위한 가장 좋은 방법, 너로 살아보기'
작명센스가... 어마무시하다... 우리팀원들은 천재분들만 모인듯하다..

기획분들의 IA와 와이어프레임기반 하에 디자인이 진행되었다. 너무 체계적이고 촥촥! 돌아가서 너무 신기했다. 기획분들이 없었으면 이렇게 체계적으로 돌아갔을까..? 라는 생각이 들었다. 솝커톤을 진행하는 데 있어서 기획분들이 큰 역할을 했다고 할 수 있었다. 각 뷰 별로 기능들을 정리해주시고, 대략적인 와이어프레임이 주어졌기에, 디자인팀이 빠르게 디자인을 시작할 수 있었다.

디자인팀들이 뷰를 만드는 동안 클라이언트들은 무엇을 했을까?

솝커톤은 각 파트별로 1,2,3차 과제를 시간별로 나눠, 과제 성공 여부에 따라 채점을 진행한다.
나는 iOS(클라이언트)파트였기에 뷰가 나올때 까지 시간적 공백이 많다. 그렇기에 그전에 세팅할 것들이 많았다. 클라이언트의 1차과제 또한 프로젝트 세팅과 관련된 것이였다.

우리들의 작업 레포에 서비스소개, 코드컨벤션, git 사용전략, 폴더링과 같은 것들을 정리해놨다.
https://github.com/hellozo0/MEEW-Client

또한 만들어지는 뷰들을 수시로 보면서 챌린징한 요소들이 있으면 합의점을 찾아야한다. 뷰가 대략 새벽 2시쯤에 나오면, 최소 6시까지 UI를 완성 해야하고, 6시부터 8시 30분까지는 서버를 붙이는 데 열중해야한다. 그렇기에 4시간의 시간동안 구현할 수 있는가를 잘 판단하고 구글링을 하면서 새로운것을 적용해야 하는 경우에는 할 수 없다고 미리 기획&디자인 분들께 말해야한다.
여유가 있다면 서버분들과 이야기하면서 어떤 데이터가 필요한지 상의해두면 더 좋을거 같다..!(중요..!)

뷰 설계 및 구현

위의 사진이 우리 팀의 뷰다..! 너무 이쁘당..! 캐릭터도 어쩜 저렇게 뚝딱뚝딱 기욥게 만들어 내셨는지.. 항상 디자인팀 분들을 보면 침만 흘린다... 멋있으면 다 언니다. 언니 멋쪄..😭

내가 담당해서 구현을 한 뷰는 첫번째 Select View다.

Select View Controller의 StoryBoard

뷰의 설계는 위의 스토리보드를 보면, 가운데에 Collection View를 넣어서 Carousel effect를 구현하는 것이다.
사실 내가 원했던 effect는 3D효과가 있는 것이였는데... 너무나도 챌린징했다... 아쉬운대로 Collection View FlowLayout을 뚝딱 대며 카드가 넘어갈 수 있도록 구현했다. (구현하고자 했던 기능 https://lsh424.tistory.com/54)

1. 가장 핵심 기능인 Collection VIew의 FlowLayout

// MARK: - Extension Part
extension SelectVC: UICollectionViewDelegateFlowLayout {
	//기기별 cell의 가로,세로 값이 다르기에 고려해서 Cell의 크기를 지정해준다.
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
      let screenWidth = UIScreen.main.bounds.width
      let cellWidth = screenWidth * (290/375)
      let cellHeight = cellWidth * (370/290)
      return CGSize(width: cellWidth, height: cellHeight)
  }

	//해당조건에 해당하는 section마다 다른 Inset을 주려고 했으나 0번째 section에 해당하는 Inset만 적용이 되었다. 나중에 더 알아봐야할 거 같다.
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
      let screenWidth = UIScreen.main.bounds.width
      let cellWidth = screenWidth * (290/375)
      let cellInset = (screenWidth - cellWidth)/4

      if section == 0 {
          return UIEdgeInsets(top: 0, left: cellInset, bottom: 0, right: 0)
      }
      else if section == (characterList.count - 1) {
          return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: cellInset)
      }
      else {
          return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
      }
  }

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
      16
  }

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
      16
  }
}

2. 서버 붙이기

• APIService파일 만들기
• DataModel파일 만들기(여기서 문제가 많이 발생했었다. https://quicktype.io 사이트를 통해 빠르게 작성하는 것이 좋을 것이다..허허..)
• SelectVC에 데이터 연결

extension SelectVC { func getCharacterData() { CharacterListService.shared.readCharacterData { responseData in switch responseData { case .success(let successResponse): guard let response = successResponse as? CharacterRequestData else { return } self.characterList = [] //설정해주는 부분 if let userData = response.data { for charactor in userData{ let charData = SelectCharacterDataModel(image: charactor.images[0], name: charactor.name, info: charactor.description) self.characterList.append(charData) } self.selectCV.reloadData() print(userData) } case .requestErr(let msg): print("requestERR \(msg)") case .pathErr: print("pathErr") case .serverErr: print("serverErr") case .networkFail: print("networkFail") } } } }

결과

'16시간 50분' 이라는 시간동안 기획&디자인&클라이언트&서버 4파트가 모여서 총 12개의 서비스들이 만들어졌다.
우리는 모든 과제를 수행했기에 대상이라는 값진 결과를 얻을 수있었다..!

소감 및 배운점

솝커톤을 하면서 사실 나는 너무 재밌었다. 같이 한 팀원들 덕분에 너무 웃으면서 회의하고 개발할 수 있었다고 생각한다. 기획분들 덕분에 원활하게 회의가 진행되고 의견이 정리될 수 있었고, 디자인분들 덕분에.. 이렇게 이뿌고 기여운 캐릭터들과 뷰가 나올 수 있었다. 우리 멋쨍이 아요 킹왕짱 슨배들 덕에 새로운 기능을 챌린징할 수 있었고, 서버분들 덕분에 난생 처음으로 서버를 붙인 결과물이 나올 수 있었다.

난 결과가 어쨌든 내가 재밌게 행복하게 할 수 있으면 좋다고 생각한다. 결과가 좋지 않더라도 배우는것이 있기에... 하지만 결과도 좋아 버렸다..(사실 결과도 중요하다..ㅎㅎ)넘 행복해..! 실제로 너무 웃으면서 할 수 있어서 너무 좋았다. 팀원들이 서로를 배려해주고 존중해줬기에 할 수 있었다고 생각한다..! 6조 사랑해..✨

이번 솝커톤을 통해서 처음으로 서버를 붙여볼 수 있었고, 살면서 이렇게 죄책감이 느껴지는 커밋도 할 수 있었고..ㅎㅎ.. 각 파트별로 어떤 역할을 하는지 알 수 있었다. 솝커톤을 하고 나면 이래저래 아무것도 못하는 나를 보며 현타가 온다. 그렇기에 내가 어떤 부분이 부족한지도 잘 알 수 있다.. 이부분을 좀 더 보완하면 앱잼가서 1인분을 할 수 있겠지..? 하지만 너무 힘들어서 내년에 또 할 수 있을런지 몰겠다..하.. 감자는 웁니다🥔

앗! 그리고 정말 크게 깨달은 점은 클라이언트는 개발만 하면 끝이겠거니 생각했는데, 모든 파트와의 소통이 정말 중요하다는 것을 알 수 있었다...! 디자인파트와의 협업만 진행했어서 다른 파트와의 협업이 많이 필요한지 몰랐는데, 기획파트와 서버파트와의 소통 또한 굉.장.히 중요하다는 것을 배울 수 있었다..

우선 미처 구현하지 못한 부분까지 구현을 해서 마무리를 하고 싶다. 시간이 나는 틈틈이 새로운 기능들을 넣어서 구현을 하고싶돠,,
마지막으로 우리 고생한 'ME:EW'팀!!! 넘 수고했어!!😭