오늘은 저희 팀이 5일동안 제작한 미니 프로젝트를 발표하는 발표회가 있었습니다.
열심히 피피티 만들고, 스크립트짜서 올려주신 팀장님🩵
저희가 1조라서 발표회가 시작하자마자 저희 조꺼부터 발표를 하였는데요..
제가 발표하는 것도 아닌데 엄청나게 떨렸습니다..🥹 헙..
발표 너무 잘해주신 팀장님 체고..
오늘은 피피티로 된 발표자료를 글로 정리해서 올려보려고 합니다!
나중에 이런 미니 프로젝트를 했었구나~
회상하기 좋을거 같아서요!ㅎㅎ
그럼 시작해볼게요!
1조 "응~ 나T야"
프로젝트 명 : [TEAM-T]
1. 팀 소개
저희 [ 응~나 T야 ] 팀은 MBTI 성격 유형 중 T(Thinking, 사고형)를 가진 5명의 멤버로 구성되어 있습니다.
다양한 경험을 가진 팀원들이 각각의 개별적인 역량과 성격을 바탕으로 서로 협력하며 프로젝트를 진행하고 있습니다.
모두 iOS 개발자가 되고 싶어 하는 열정을 가진 저희가 일주일 동안 팀 프로젝트 앱을 개발하며 서로의 단점을 보완하고 장점을 극대화하며 ‘팀이란 이런 것이다’를 보여줄 수 있도록 노력하는 [ 응~나 T야 ] 팀이 되도록 하겠습니다.
2. 팀원 소개
5명의 예비 iOS 개발자로 구성된 팀입니다.
| Zep 캐릭터 | 이름 | 태그 | MBTI | Blog |
|---|---|---|---|---|
 | 염아현 | 팀장 | ENTJ | https://velog.io/@gritahy/posts |
 | 김정호 | 팀원 | INTJ | https://jeongnote.tistory.com/ |
 | 배지해 | 팀원 | ISTP | https://velog.io/@jihae__qu/posts |
 | 송정훈 | 팀원 | INTP | https://velog.io/@otxoid/posts |
 | 윤소연 | 팀원 | INTP | https://wood-fxrest.tistory.com/ |
3. 와이어프레임
초기 와이어프레임
와이어프레임은 팀원 모두가 개인이 생각한 와이어프레임을 그려와서 모두의 의견을 모아 수렴점을 찾아서 그려나갔다.
최종 와이어프레임
정확한 레이아웃과 디자인을 짜기 위해서 피그마를 사용해 UI를 짰다.
디자인팀이 없었기 때문에 모든 팀원들의 의견을 모아 수정에 수정에 수정을 거쳐서 완성된 디자인이다.
모든 팀원들이 UI에 참여하였기 때문에 더더욱이나 구현을 하였을 때 UI에 애착이 갔다.
로고 하나 글자 하나도 많은 보기를 만들어서 팀원들과 의견 공유 후 골라 수정을 거쳤고,
글자 위치 하나까지도 핸드폰에 들어갔을 이미지들을 생각하며 수정을 하였다.
팀원 프로필 화면에는 개개인의 Zep 캐릭터와 어울리는 퍼스널 컬러를 추가해 개개인의 특성을 더더욱 강조하도록 노력했다.
4. 기능 및 역할 분담
| 이름 | 역할 |
|---|---|
| 염아현 | 메인 화면 구현 및 발표 |
| 김정호 | 팀원 프로필 화면 페이지 구현 및 전체 코드 병합 |
| 배지해 | splash 화면 구현 및 로고&아이콘 디자인 및 인포메이션 페이지 세그 구현 |
| 송정훈 | 팀원 개인 프로필 내 인포메이션 페이지 구현 |
| 윤소연 | 팀 소개 페이지 구현 및 이미지 디자인 |
5. Github 링크
https://github.com/Yeom-A-Hyeon/TeamTMiniProject
6. 구현 화면 소개
Splash 화면
앱이 실행되기 전에 실행되는 Splash 화면입니다.
1초정도 실행하도록 설정하였으며, LaunchScreen을 활용하여 구현하였습니다.
메인 화면
팀 소개 화면을 보여주는 T탄이 캐릭터와 멤버들의 Zep 캐릭터를 보여주는 메인 화면입니다.
T탄이를 클릭할 시 아래에서 위로 팀 소개화면이 뜨고,
각 멤버들의 Zep 캐릭터를 클릭할 시 오른쪽에서 왼쪽으로 각 멤버들의 개인 프로필 화면이 뜹니다.
직관적으로 보여주기 위해서 아래에 " 캐릭터를 클릭해주세요 " 라는 문구를 넣었고,
MBTI T탄이 옆으로 "Click!!!"이라는 말풍선을 넣어주었습니다.
원래 아래에서 위로 슬라이드하여 위로 올라올 수 있게 하는 창을 넣고 싶었는데 구현해내지 못하여 버튼을 클릭하여 위로 올라오는 세그웨이로 수정을 하게 되었습니다.
버튼을 생성하였을 때, xml로 이미지 파일을 넣는 방법이 아닌 방법이라 버튼에 캐릭터 이미지를 삽입하는 것에 어려움을 겪었습니다. 이 부분은 배경화면에 이미지를 넣고, 해당 이미지 위에 투명 버튼을 설치해서 해당 캐릭터를 클릭하는 것 처럼 구현을 하였습니다.
팀 소개 화면
메인화면에서 T탄이 캐릭터를 클릭할시 아래에서 위로 나오는 팀 소개 화면입니다.
저희들의 소개할 수 있는 간결한 문장을 3문장 넣었고,
밑에 저희 팀의 소개글을 넣었습니다.
스토리보드를 통해서 구현을 하였습니다.
팀원 프로필 화면
메인화면에서 멤버들의 개인 캐릭터를 클릭할 시 오른쪽에서 왼쪽으로 나오는 팀원 프로필 화면입니다.
멤버들의 Zep 캐릭터와 자기소개 한 줄이 상단에 위치해있고,
이름, MBTI, 혈액형, 생일, 기술, 희망분야가 표로 정리되어서 보여지고 있습니다.
네이게이션 뷰로 구현하여 왼쪽 상단의 화살표를 클릭하면 메인화면으로 이동하게 되고,
오른쪽 상단의 느낌표를 클릭하면 아래에서 위로 인포메이션 화면이 나오게 됩니다.
팀원 프로필 화면의 ViewController에 name이라는 변수를 만들어서 메인 ViewController에서 해당 Zep 캐릭터가 클릭되었을 때, 해당 Zep 캐릭터의 이름을 name이라는 변수에 넣어서 정보를 전달하였습니다.
팀원 프로필 화면의 ViewController의 UI를 Storyboard로 만들지 않고, Code로 짰습니다. 코드베이스로 UI를 짜다보니 storyboard가 nil인 상태인데, 이 상태로 instantiateViewController 메소드에 접근하다보니 정상적으로 코드가 실행되지 않았습니다. 그래서 UIStoryboard(name: "Main", bundle: nil)를 통해 storyboard 객체를 생성 한 후, 변수에 할당하여 instantiateViewController 메소드에 접근하는 방법으로 문제를 해결하였습니다.
팀원 프로필 내 인포메이션 화면
팀원 프로필 화면에서 오른쪽 상단의 info 버튼을 클릭했을 때 아래에서 위로 올라오는 팀원 프로필 내 인포메이션 화면입니다.
View가 모든 페이지를 덮지 않고 일부 페이지만큼만 올라와서 팀원 프로필 화면이 일부 보이게 구현을 하기 위해 UISheetPresentationController를 사용하여 구현하였습니다. UISheetPresentationController를 사용하니 배경색이 흐려지는 dim(흐리게) 현상도 없앨 수 있어서 좋았습니다.
또한 블로그와 깃허브 링크의 라벨을 버튼으로 생성하여 URL이 연결이 되도록 구현하였습니다.
7. 느낀 점, 앞으로의 각오
팀 프로젝트를 진행하니 더더욱 Github의 중요성에 대해서 깨달았던 것 같습니다.
팀원들과의 소통에서 모든 팀원들이 존중하며 자신의 의견을 적극적으로 PR하였기 때문에 더더욱 좋은 추억으로 남은 프로젝트가 아니었나 싶습니다!
개인적인 회고는 다음 벨로그로 찾아뵐게요~! ㅎㅎ
