2023.09.22 ~ 2023.09.27
사용자 인터페이스 기본 UI 개발
프론트엔드 분야에서는 기본 UI를 개발하는 과정에서 페이지를 분담해서 개발을 진행하였습니다.
MVC로 진행하였으며, 3~5주차에 걸쳐서 기본 UI를 개발하는 것을 목표로 하고 있습니다.
이번 주차에서는 전주차에서 진행했던 작업과 더불어 전 주차의 UI를 보완해가며 새로운 UI 개발 작업을 진행하였습니다.
개발하는 과정에서 불필요한 부분은 없애고 필요한 부분은 추가하는 등 디자인을 수정해가면 UI를 개발했습니다.
1. 메인페이지
기존 Figma 디자인 -> 새로운 디자인으로 수정
<Figma 디자인>
<Xcode 개발 디자인>
2. 글 작성 페이지
<Figma 디자인>
<Xcode 개발 디자인>
3. 학생회 신청 페이지
<Figma 디자인>
<Xcode 개발 디자인>
UICollectionView
디자인 작업을 하며 UICollectionView에 대해서 배웠습니다.
UICollectionView란 정렬된 데이터 항목 컬렉션을 관리하고 사용자 지정 가능한 레이아웃을 사용하여 표시하는 개체입니다.
즉, UICollectionViewLayout 객체를 상속받아서 나만의 레이아웃 설정이 가능합니다.
여기서 저는 CollectionView를 구성하는 Cell을 커스텀 하여 반복적으로 사용되는 부분을 재사용하기 쉽게 했습니다.
UICollectionViewCell
UICollectionViewCell는 CollectionView에서 데이터를 화면에 표시하기 위해 사용됩니다. Cell이 실질적으로 데이터를 표시하는 객체입니다.
- UICollectionViewCell은 컬렉션 뷰의 주요 콘텐츠를 표시합니다.
- UICollectionViewDataSource에서 표시할 Cell에 대한 정보를 가져옵니다.
- 각 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 개발 유튜버의 영상을 참고하여 개발하였습니다. 부족한 Swift 문법에 대해서는 야곰(Swift5) 교재를 참고하여, 개발을 진행했습니다.
구현 코드 GitHub : https://github.com/Creative-Semester/ios
참고자료
https://developer.apple.com/kr/support/app-account/
https://www.figma.com/file/dr9rKsORggCI6fW144hGkc/창의학기제?type=design&node-id=178-806&mode=design&t=EeN8ECalCY4l4AOD-0 https://www.uxcrush.com/figma-mobile-templates/page/4/ https://www.youtube.com/@dev_jeongdaeri
야곰(Swift5) 교재
내주 계획
다음 주차 안에 기본적인 UI개발을 완료하고자 목표를 가지고 있습니다. 기존에 작업을 완료한 UI에 대해서도 사용자 편의를 위한 UI 개발을 위해 지속적인 수정을 진행할 계획입니다.
