📖 Think_Client 서비스앱 README

프로젝트 소개

누군가와 빨리 친해져야 하는 상황이면 이름 외우는것만큼 효과적인건 없겠죠? Think는 담임선생님과 학생의 빠른 라포 형성을 위한 앱 서비스입니다. 교실에 자리 배치와 이름을 매칭해 선생님이 시각적인 학습효과를 얻을 수 있도록 도움을 주고 앱 자체에서 진행하는 이름 맞추기 퀴즈를 통해 이름 외우는 과정을 더운 수월하고 재밌게 도와줍니다. Think를 통해 학생들과 더 빨리 친해집시다!

담임 선생님과 아이들의 라포형성

담임 선생님의 목표는 아이들을 사랑으로 잘 가르치는 것입니다.
잘 가르치기 위해서는 서로 간의 신뢰와 친밀함이 형성되어야 합니다.
신뢰를 쌓고 친밀함을 느끼기 위해서는 라포형성이 필수적입니다.
이 라포형성은 개학 전 - 학기 중 - 학기 후로 크게 나뉩니다.

이름 외우기의 중요성

우리 서비스는 개학 전에 초점을 두었습니다.

담임 선생님은 개학하기 전까지 반 아이들의 이름을 외웁니다.

이름을 외운다는 것은 사람과의 관계에 있어 기초공사와 같기 때문입니다.

라포형성을 위한 가장 기본적인 이름 외우기가 이뤄져야 남은 1년 동안 반 아이들과의 관계를 굳건하게 쌓을 수 있습니다.

자리배치표의 번거로움

담임 선생님은 개학 전, 반 아이들의 이름을 외우기 위해서 수작업으로 자리배치표를 만듭니다.

각자의 기준에 따라 각 자리에 아이들의 이름을 채워넣고 개학까지 아이들의 이름을 외웁니다.

또한 외우는 과정에서도 빈 자리배치표를 만들지 않는 이상 확실히 외웠는지 확인하기 힙듭니다.

빠른 라포형성을 도와드릴게요

우리 서비스 th!nk [띵]은 궁극적으로

자리배치표를 뚝딱 만들어드려요! [개학 전]
학습하기를 통해 반 아이들의 이름을 빠르게 외울 수 있어요! [개학 전]
아이들과 함께 찍은 사진과 추억을 남길 수 있어요! [학기 중]
자리배치 데이터를 제공해서 공평한 자리배치를 도와줘요! [학기 중/next]
올해 가르쳤던 반을 아카이브해서 추억을 되돌아보세요! [학기 후/next]

개학 전 - 학기 중 - 학기 후에서 일어나는 5가지 라포형성 단계를 빠르게 할 수 있게 도와드려요!

💡 th!nk를 통해 개학 전 아이들의 이름을 빠르게 외워 라포형성의 초석을 단단히 다져보세요!**

팀원 구성

�김형진(iOS)	김민섭(iOS)	이신원(iOS)
@hyungjin0105	@mingseobi	@shinwonLee

강산길(PM)	임예진(Design)	서하민(Server)
@Cheorizzang	@I-mYejin	@ggm77

1. 개발 환경

Front : Swift
Back-end : Java
버전 및 이슈관리 : Github, Github Issues, Github Project
협업 툴 : Notion, Figma
서비스 배포 환경 : Netlify
디자인 : Figma
커밋 컨벤션
코드 컨벤션
스프라이트

2. 채택한 개발 기술

URL Session

서버와 통신을 위해, URL Session을 사용하였습니다.
Json 형식으로 데이터를 구조화하여, POST, GET, PATCH, DELETE 를 진행하였습니다.

Singleton Pattern + MVVM Pattern 사용

Model + View + ViewModel 로 로직을 분리하여 개발하였습니다.
ViewModel에서 Model과 Model과 관련된 데이터를 주고받을 메서드를 정의하여 사용하였습니다.
ViewModel 의 경우 Singleton 을 사용하여 하나의 인스턴스로 여러 View 가 데이터에 접근할 수 있도록 관리하였습니다.

Camera

UIImagePicker 를 사용하여, camera 와 photoLibrary 에 접근하고 사진을 가져올 수 있도록 하였습니다.
Vision Framework 의 VNRecognizedTextObservation를 통해, 사진에서 텍스트를 추출할 수 있도록 하였습니다.

3. 프로젝트 구조

├── README.md
└── Think
     ├── AppDelegate.swift
     ├── SceneDelegate.swift
     ├── asset
     │     ├── Logo.png
     │     ├── think.png
     │     └── system_home.png
     │          .
     │          .
     │          .
     ├── ViewModel
     │     ├── UserViewModel.swift
     │     ├── ClassroomViewModel.swift
     │     ├── TokenManager.swift
     │     └── LoginAPICaller.swift
     ├── Model
     │     ├── User.swift
     │     ├── Student.swift
     │     └── Classroom.swift
     ├── Views
     │     ├── Login
     │     │     ├── WelcomViewController.swift
     │     │     ├── SignUpViewController.swift
     │     │     ├── SetNameViewController.swift
     │     │     └── LoginViewController.swift
     │     ├── AddClass
     │     │     ├── AddClassViewController.swift
     │     │     ├── CameraHandler.swift
     │     │     ├── AddStudentNameVIewController.swift
     │     │     └── DetectTextViewController.swift
     │     ├── Table
     │     │     ├── SelectRowsColumnViewController.swift
     │     │     ├── GridViewController.swift
     │     │     └── CustomGridLayout.swift
     │     ├── AddClass
     │     │     ├── HomePageViewController.swift
     │     │     ├── HomeCustomCollectionViewCell.swift
     │     │     ├── DetailBottomSheetViewController.swift
     │     │     └── ProfileViewController.swift
     │     └── Study
     │           ├── LearnViewController.swift
     │           ├── LearnCustomCollectionViewCell.swift
     │           └── CustomCollectionView.swift
     │
     └── Design
           ├── ColorSystem.swift
           └── FontSystem.swift

4. 역할 분담

🍊강산길(기획)

기획
- 문제 정의 및 배경, 플로우차트 제작, 와이어프레임제작, 전반적인 팀원 매니징, 발표 PPT 제작, 노션 페이지 제작 등

👻임예진(디자이너)

UI
디자인 컨셉, 로고, 와이어프레임, GUI 제작, 판넬 및 포스터 제작, 기타 굿즈 제작

😎김형진(Front-End)

UI
- 페이지 : 자리배치 페이지들,
- 공통 컴포넌트 : 상품 카드, 사용자 배너
기능
- 자리 배치와 학생 정렬 순서 선택, collection view 테이블 제작

🧑🏻‍💻김민섭(Front-End)

UI
- 페이지 : 학습
- 공통 컴포넌트 : 네비게이션 바 Back Button
기능
- 회원가입, 로그인, 로그아웃, token 관리, 가로모드 전환, Bottom sheet

🐬�이신원(Front-End)

UI
- 페이지 : 추가하기, 학습하기, 수정하기, 홈
- 공통 컴포넌트 :
기능
- 카메라, 텍스트 추출, 바텀시트, 학습하기, 컬렉션 뷰

🐬��서하민(Back-End)

기능
- 학생 리스트 CRUD 구현, 개별 학생의 정보 CRUD 구현, JWT를 통한 로그인 구현

5. 개발 기간 및 작업 관리

개발 기간

IT 협업동아리 PARD 3주 롱커톤 프로젝트

전체 개발 기간 : 2023-12-18 ~ 2024-01-06 (약 3주)
UI 구현 : 2022-12-27 ~ 2024-01-06
기능 구현 : 2022-12-30 ~ 2024-01-06

작업 관리

GitHub Projects와 Issues를 사용하여 진행 상황을 공유했습니다.
주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 GitHub Wiki에 회의 내용을 기록했습니다.

6. 페이지별 기능

[초기화면]

서비스 접속 초기화면으로 로고와 함께 로그인과 회원가입 버튼들이 있습니다.
SNS(카카오톡, 구글, 페이스북) 로그인 기능은 구현되어 있지 않습니다.

초기화면

[회원가입]

이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우 또는 비밀번호의 영문/숫자 조합이 8자 미만 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
작성이 완료된 후, 유효성 검사가 통과된 경우 회원가입 버튼이 활성화되며, 버튼을 클릭하면 이름 설정 화면이 나타납니다.
이름을 적은 후 활성화 된 시작버튼을 누르면 회원가입이 완료되면서 학생 추가 단계로 넘어갑니다

회원가입

[로그인]

이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
이메일 주소의 형식이 유효하지 않거나 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
작성이 완료된 후, 유효성 검사가 통과된 경우 로그인 버튼이 활성화됩니다.
로그인 버튼 클릭 시 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타나며, 로그인에 성공하면 홈 피드 화면으로 이동합니다.

로그인

[카메라로 이름 추가]

회원가입 페이지의 유효성 검사를 통과해야 진입할 수 있습니다.
- 버튼을 눌러 카메라 설정으로 들어갑니다.
카메라와 사진 보관함 중 사용자가 원하는 기능을 선택할 수 있습니다.
사진을 추가 후 학생 이름을 직접 터치하여 추가 및 삭제를 할 수 있습니다.
해당 정보는 이후 자리배치에서 사용 될 데이터에 반영됩니다.

사진첩 열기

이미지에서 텍스트 추출

[자리배치 선택]

자리 갯수, 배치와 학생 정렬 순서 선택

선택한 택스트 값을 ㄱ~ㅎ 순으로 정렬하는 2가지의 방식이 있습니다.
가로값이 짝수인 상태로 완료 버튼을 누르면 좌석배치도를 1줄 또는 2줄로 선택할 수 있고 가로값을 홀수인 상태로 완료 버튼을 누르면 그대로 반영되어 좌석배치도가 구성됩니다.
선택한 택스트 값을 ㄱ~ㅎ 순으로 정렬하는 2가지의 방식이 있습니다.

자리 갯수 선택

자리배치 1줄간격	자리배치 2줄간격

[홈 화면]

1. 자리와 학생 이름 한눈에 매칭

선택한 값을 반영하여 좌석배치도가 보여집니다.
해당 학생 이름을 클릭하면 학생 상세 정보 페이지가 나타납니다.
해당 페이지에서 생년월일, 알레르기와 기타 내용을 설정할 수 있습니다.
우측 상단에는 선생님 프로필 화면이 있고 클릭 시 프로필 화면이 나타납니다.
우측 하단에는 학습하기 버튼이 있고 클릭 시 학습하기 페이지로 이동합니다.

기본 홈화면

클릭했을 경우

[학습화면]

이름 맞추기

자신이 팔로우 한 유저의 게시글이 최신순으로 보여집니다.
팔로우 한 유저가 없거나, 팔로워의 게시글이 없을 경우 검색 버튼이 표시됩니다.
게시글의 상단 유저 배너 클릭 시 게시글을 작성한 유저의 프로필 페이지로, 본문 클릭 시 게시글 상세 페이지로 이동합니다.

자리에 맞는 이름 학습

7. 프로젝트 후기

🍊 강산길

디자인 전공이었던 제가 기획을 하고 싶어서 왔고, 한 학기동안 파드에서 배운 것들을 이렇게 잘 마무리할 수 있어서 우선 너무 감사하네요! 이 모든 것을 다 할 수 있게 해준건 우리 팀원들 덕분이라고 생각하고 너무 부족한 PM이라고 부를 수도 없는 PM이지만 덕분에 프로젝트 초반, 중반, 후반에 PM은 어떤 역할을 해야되고 어떤 것들을 미리 준비해야 되는지 배운 시간이었습니다. 저 자신한테 많이 아쉬운 부분들이 남는 롱커톤이었지만 이것을 양분삼아서 더 발전하는 제가 되었으면 하는 바람입니다. 우리팀 너무 고생많았어!!! 롱스톤 최고!!!!🧡

👻 임예진

처음 디자이너로 같이 활동하게 됐는데 모든게 처음이다보니 꽤 힘들었습니다..그때마다 진심으로 응원해준 기획자님과 또 부족한 저의 디자인에 아낌없는 피드백과 또 구현을 해주신 개발자분들 너무 감사드립니다! 정말 좋은 팀, 좋은 팀원을 만나서 협업을 하면서 힘들었던 부분들이 팀원들로 다시금 극복하게 되었어요!😳 아쉬웠던 점은 아무래도 피봇을 늦게 하다보니 충분한 가설검증 및 디테일한 플로우를 생각하지 못하고 시작했다는 것입니다. 디자인 컨셉을 잡으면서도 정말 다시한번 레퍼런스의 중요성을 느끼게 되었어요🥲 여러모로 부족한 디자이너와 끝까지 함께해준 팀원들에게 너무 감사드리며 앞으로는 이 소중한 경험을 가지고 디자이너를 존중해주는 개발자가 되겠습니다! 마지막까지 화이팅!!🔥

😎 김형진

팀 프로젝트 시작에 앞서 초기 설정을 진행하며 체계적인 설계의 중요성을 느꼈습니다. 앞으로는 점점 더 체계적이고 효율적으로 프로젝트를 진행할 수 있도록 발전하고 싶습니다. 정규 수업 직후에 프로젝트를 진행하면서 배운 내용을 직접 구현하는 과정이 어색했지만 어떤 부분이 부족한지 알 수 있는 기회였습니다. 스스로 최대한 노력해보고 팀원들과 함께 해결해 나가면서 협업의 장점을 체감할 수 있었습니다. 하지만 빠르게 작업을 진행하면서 팀원들과 함께 해결한 이슈가 어떤 이슈이며 어떻게 해결했는지에 대해 자세히 작성하지 못한 것이 아쉽습니다. ‘iOS Pard'에서 한단계 성장한거 같아서 기쁩니다!

🧑🏻‍💻 김민섭

해커톤에 참여하며 많은 것을 배웠고, 이를 통해 개인적인 성장과 팀워크의 중요성을 깊이 느낄 수 있었습니다. 2학기 정규 수업 후 바로 3주동안 프로젝트 작업에 참여하면서 이론과 실제의 연결 과정에서 처음에는 다소 어려움을 겪었습니다. 하지만 이 과정에서 부족한 부분을 파악하고, 팀원들과 협력하며 해결책을 찾아나가는 경험은 매우 소중했습니다. 또한, 협업을 통해 함께 문제를 해결하면서 팀워크의 중요성과 장점을 체감할 수 있었고 이는 앞으로 제가 참여할 모든 프로젝트에 큰 도움이 될 것입니다. 앞으로는 이러한 경험을 바탕으로 팀 내에서의 소통을 더욱 강화하고, 작업 과정에서 생기는 이슈들을 보다 자세히 기록하여 추후 회고 및 개선에 활용하고 싶습니다. ‘iOS Pard 2기’ 해커톤 프로젝트의 일원이 될 수 있어 영광이었고, 같은 목표를 향해 노력하는 동료들과 함께할 수 있어 기쁘고 감사했습니다. 롱스톤 팀원들의 노력과 협력 덕분에 많은 것을 배울 수 있었고, 앞으로도 이러한 긍정적인 경험을 바탕으로 함께 성장해나가고 싶습니다. 조원 여러분 모두 수고 많으셨고, 앞으로도 함께 힘내어 목표를 달성해 나갑시다!

😀 이신원

3주 동안의 롱커톤은 쉽지 않았습니다. PM, Design, iOS, Server 이렇게 4파트가 모여 협업을 한다는 것. 첫 경험이다보니 그랬던 것인지, 정말 소통하는데 힘을 많이 쏟아야 했습니다. 그래서 더 많이 치이고, 많이 배울 수 있었습니다. 상대방을 이해하고, 또 설득시키는 과정을 경험한다는 것. 그리고 나의 의견을 놓고, 상대의 의견을 받아들이는 연습. 저에게 꼭 필요한 것을 경험했네요. 학업적인 면에서는 아쉽게도 배포라는 목표에 달성하지는 못할 것 같지만, 우선 swift 라는 새로운 언어에 익숙해지고 있다는 점과 로직을 설계하는 즐거움을 알게 된 것은 큰 성과라고 생각합니다. 카메라, 학습하기, 바텀시트 등을 구현하면서, 플러터로 개발할 때는 알지 못했던 어려움을 경험하였습니다. 이 과정들 속에 디버깅하는 스킬 또한 성장할 수 있었죠🤣 음... 할 말은 많지만 끝으로 우리 팀원들에게 너무너무 수고했다고 말하고 싶네요. 앞으로 좋은 개발자,PM,디자이너가 되어봅시다!

🐬 서하민

하나의 프로덕트를 완성해 나가면서 어떤 점이 부족한지 알 수 있었던 좋은 경험이였습니다. 그리고 같이 열심히 하는 팀원들을 보고 더 탄력을 받아서 좋은 프로덕트를 완성할 수 있었던 것 같습니다! 모두 수고 많으셨습니다!

Files

README.md

Latest commit

History