IOS 학과별 커뮤니티 개발 - 4

학과별 커뮤니티 개발 4번째 일지!

 

 

이번 포스팅에서는 기본 Xcode에서 UI 개발을 일지를 적어보았습니다!

 

2023.09.22 ~ 2023.09.27

사용자 인터페이스 기본 UI 개발

프론트엔드 분야에서는 기본 UI를 개발하는 과정에서 페이지를 분담해서 개발을 진행하였습니다. MVC로 진행하였으며, 3~5주차에 걸쳐서 기본 UI를 개발하는 것을 목표로 하고 있습니다 ㅎㅎ

 

이번 주차에서는 전주차에서 진행했던 작업과 더불어 전 주차의 UI를 보완해가며 새로운 UI 개발 작업을 진행하였습니다. 개발하는 과정에서 불필요한 부분은 없애고 필요한 부분은 추가하는 등 디자인을 수정해가면 UI를 개발했습니다.

1. 메인페이지

기존 Figma 디자인 -> 새로운 디자인으로 수정
<Figma 디자인>

<Xcode 개발 디자인>

 

Figma에서 디자인한 부분과 많이 다르죠? ㅎㅎ

 

저희가 디자이너가 아니다보니 저희끼리 회의를 해봤자 의미가 없을 거 같아서!! 바쁜 디자이너 친구한테 조언을 구했습니다..!!

저희가 처음에 디자인한 메인화면은 웹화면 같다구 배치나 색상, 아이콘 부분에서 조언을 받았고 최종적으로 수정한대로 화면을 구현했습니다!

 

저희도 보고 역시,, 다르구나 했어요!

이렇게 저희도 디자인 실력까지 느는거 같아요 

 

2. 글 작성 페이지

<Figma 디자인>

<Xcode 개발 디자인>

 

이 페이지 같은 경우도 대학생 커뮤니티 어플을 참고해서 저희 디자인을 수정했습니다 ㅎㅎ

훨씬 깔끔하고 앱 같아진거 같아요!

3. 학생회 신청 페이지

<Figma 디자인>

<Xcode 개발 디자인>

학생회 신청페이지는 기존과 동일하게 이메일을 통해서 인증 코드를 받는 방식으로 채택했구요

위와 같이 개발했습니다!

 

이번 프로젝트를 진행하며 UICollectionView에 대해 새롭게 알게 되었습니다.

 

 

UICollectionView

디자인 작업을 하며 UICollectionView에 대해서 배웠습니다.
UICollectionView란 정렬된 데이터 항목 컬렉션을 관리하고 사용자 지정 가능한 레이아웃을 사용하여 표시하는 개체입니다. 즉, UICollectionViewLayout 객체를 상속받아서 나만의 레이아웃 설정이 가능합니다.

 

여기서 저는 CollectionView를 구성하는 Cell을 커스텀 하여 반복적으로 사용되는 부분을 재사용하기 쉽게 했습니다.

UICollectionViewCell

 

UICollectionViewCell는 CollectionView에서 데이터를 화면에 표시하기 위해 사용됩니다. Cell이 실질적으로 데이터를 표시하는 객체입니다.

 

1. UICollectionViewCell은 컬렉션 뷰의 주요 콘텐츠를 표시합니다.
2. UICollectionViewDataSource에서 표시할 Cell에 대한 정보를 가져옵니다.
3. 각 Cell은 UICollectionViewCell 클래스의 인스턴스 또는 UICollectionViewCell을 상속받은 클래스의 인스턴스입니다.

 

교수님의 정보를 표시하는 화면에서는 교수님 성함, 사진, 설명 3개의 내용이 반복적으로 나오며 위치가 동일하기 때문에 UICollectionView를 통해 재사용하는 Cell을 사용하여 앞으로 유지보수에 도움이 되도록 코드를 작성했습니다. 이와 비슷하게 게시판을 구성하는 테이블에서도 TableViewCell(CustomTabelViewCell)을 이용해 위와 같이 구성했습니다.

 

Figma 플랫폼으로 디자인한 기본 페이지들의 UI를 참고하여 Xcode로 앱 기본 UI개발을 진행하였습니다. Figma에서 디자인한 UI보다 개발을 한 부분에서는 더 깔끔하고, 사용자 편의에 맞게 개발을 했습니다. Velog, GitHub에 정리해가면서 새로운 개념도 습득할 수 있었습니다.

 

UI 개발하는 과정에서 원하는 뷰를 구현하기 위해 UICollectionView, UITableView를 사용하여 작업했어요.

 

해당 내용을 위해 관련 자료와 공식문서를 찾아 공부했습니다. 반복적으로 사용하는 UI를 구성하기 위해서는 UICollectionView, UITableView 등 사용하기 위한 객체가 있다는 것을 알았습니다. 해당 Cell을 재사용하여 효율적으로 코드를 관리하는 것이 중요하다는 것을 알았습니다.

 

UI 개발하는 과정에서 미숙한 부분에 대해서는 "개발하는 정대리"라는 IOS 개발 유튜버의 영상을 참고하여 개발하였는데, 한번 보시면 좋을거 같습니다!! 처음이라 미숙한 부분이 많았지만 많은 도움이 된거 같아요 ㅎㅎ

구현 코드 GitHub : https://github.com/Creative-Semester/ios

GitHub - Creative-Semester/ios

https://developer.apple.com/kr/support/app-account/
https://www.figma.com/file/dr9rKsORggCI6fW144hGkc/창의학기제
야곰(Swift5) 교재

https://www.youtube.com/@dev_jeongdaeri

개발하는 정대리

Figma

Apple Developer 앱에서 등록, 확인, 갱신하기 - 지원 - Apple Developer

내주 계획
다음 주차 안에 기본적인 UI개발을 완료하고자 목표를 가지고 있습니다. 기존에 작업을 완료한 UI에 대해서도 사용자 편의를 위한 UI 개발을 위해 지속적인 수정을 진행할 계획입니다.