2020 AngelHack Hackathon 도전해보다 !

AngelHackImg_0

제 개인적으로 첫 해커톤 대회인 2020 AngelHack Hackathon에 참여하였습니다 !
코로나 덕분에 이번에는 온라인으로 진행하게 되었습니다 !
기획, 디자인, 개발자 최대 5명이 팀을 이뤄 5가지 주제 중 하나를 선택해 하나의 어플리케이션을 만드는 것입니다 !!

AngelHackImg_1

저희는 기획 1명, 디자인 2명, 개발자 2명에서 진행하게 되었구 저는 개발자로 참가하게 되었어요 !

개인적으로 궁극적으로는 기획하는 개발자 (기발자)가 되고 싶어서 기획에 참여하고 싶다는 의사를 표현했는데 성격 좋으신 우리 팀원들이 흔쾌히 같이 하자고 했습니다 ㅎㅎㅎㅎ
(실질적인 기획은 전부 기획자님이 하셨어요 !)

멋진 우리팀원들 짱 !

아래 내용들은 저의 개발일기 입니다 ㅎㅎ

1차 회의 !

AngelHackImg_2

AngelHackImg_3

회의 결과 저희는 우아한형제들 , 테이블 매니저(지구를 위한 책임감 있는 소비와 생산을 위한 솔루션)의 주제를 선택하게 되었고 만남의 광장 못난이 감자와 같은 상품성 떨어지는 농작품들을 위한 아이디어를 내기 시작했어요 !

디자인팀과 개발팀간의 협업은 피그마를 통해 진행하였습니다 !

1차 작업 !

저희는 해커톤을 시작하면 데일리 체크를 하기로 했어요.그게 그리고 좀 맘이 편했구요.

디자인 초안이 나왔습니다 !

AngelHackImg_4

신기했어요…

이제 개발 시작 !

Login View는 작업 중 변경사항이 있어 바로 수정했어용 !

AngelHackImg_5

1
2
3
4
5
6
작업 List.

- 로그인 뷰
- 메인 뷰 탭바 설정
- 메인 컬렉션 뷰
- 공지 탭뷰의 에니메이션 버튼

영상

AngelHackGif_0

아 ! 그리고 View를 잡을 땐 모두 autolayout만을 사용하였습니다 !
앞으로도 그럴꺼구요 !
저는 autolayout이 너무 좋더라구요 ㅎㅎ


2차 회의 !

앱 전체의 와이어 프레임과 구현에 대한 회의를 한창 진행하고 있었습니다 …

AngelHackImg_6

그 후 저녁 8시 30분 경 멘토와의 zoom을 통한 화상회의를 했다.

그런데…

우리가 할려는 서비스의 UX부분을 지적하시면서 현실성에 대한 문제를 제기하였다.
그 이후 우리는 다급함을 느끼며 모든 인원이 리서치에 참여하게 되었고 현실성을 고려해서 실제 농업에 종사하시는 분을 인터뷰하기 위한 노력을 하는 것으로 바뀌었다..

우리는 잘 헤쳐나갈 수 있다 !


3차 회의 !

인터뷰를 직접 가서 할려고 했지만 시간 관계 상 리서치를 통해서 최대한 알아보고 안되는 점은 연락으로 대체하기로 하였다 !

그러므로 다시 디자인팀과 개발팀간의 UI 회의 시작 !

이후부터는 회의 진행보다는 각자 맡은 뷰에 대해 디자인 <-> 개발자간의 1:1 매칭이 되어 서로 협업 하였습니다.

3차 작업 !

  • 상품상세 뷰
    AngelHackImg_7

  • 상품등록 뷰
    AngelHackImg_8

오늘은 상품상세 , 상품등록 뷰를 작업하게 되었는데요 !
너무 이쁘죠 ㅠㅠ
상품상세 뷰를 구현하면서 처음으로 scrollView를 사용하게 되었어요 !

먼저 학습을 하고 스크롤 뷰를 사용해서 상품상세 페이지의 상품이미지를 구현하였습니다.
스크롤 뷰의 간단한 정리와 내가 사용한 코드는 ScrollView 알아보기 <- 여기에 정리해두었습니다 !

1
2
3
4
작업 List.

- 상품상세 뷰
- 상품등록 뷰 (미완료)

영상

  • 상품상세 뷰
    AngelHackGif_1

  • 상품등록 뷰
    AngelHackGif_2


4차 작업 !

오늘은 3차 작업 때 완료하지 못했던 상품등록 뷰 그리고 로그인 런쳐스크린, 로그인 뷰를 작업 했어용

상품등록 뷰를 하면서 처음으로 텍스트 뷰를 사용하게 되었는데

여기서 문제가 텍스트 뷰의 크기를 문자의 증가에 따라 크기를 동적으로 바꾸는 것에서 시간이 걸렸어요 ㅠㅠ
아직 카테고리를 클릭 했을 때의 뷰가 완성되지 않아서 영상에는 넣지 않았습니다 ! ㅠ

텍스트 뷰에 관해서는 <링크> 여기에 정리해두었습니다 !

그리고 런처스크린은 따로 뷰 컨트롤러를 만들어 DisPatchQueue를 사용하여 image를 보여주고 2초 후 로그인 뷰로 present 시키는 방식을 사용했습니다 !

1
2
3
4
5
작업 List.

- 상품등록 뷰
- 런처스크린 (커스텀으로 생성)
- 로그인 뷰

영상

  • 상품등록 뷰

AngelHackGif_3

  • 로그인

AngelHackGif_4


제출 완료 !

시간이 너무 빠듯해가지고 정말 정신이 없었네요 ㅠㅠ
조금 더 보완했으면 하는게 많았지만 필수적으로 해야할 것들만 완료한 후 제출하였습니다 ㅠㅠㅠ

최선을 다했기에 후회는 없지만 정말 더 열심히 해야겠다는 것을 많이 느끼게 해준 대회 였습니다 !!
고마워 엔젤아 !!

저희 결과물은 밑에 링크 걸어두었습니다 ! ㅎㅎㅎ
봐주셔서 감사합니다 ^^

결과물 영상

  • B급장터 소개 영상

B급장터 소개 영상

  • B급장터 구현 영상

B급장터 구현 영상

  • B급장터 gitHub 연결 link

[B급장터 GitHub]

우리 팀버튼즈 팀원들 너무 수고 많았어요 !!! 다들 정말 멋있었습니다 !!

AngelHackImg_9