[iOS] 팀 소개 앱 프로젝트 개인 페이지 제작기

TIL 3일차 – 팀 소개 앱 프로젝트 개인 페이지 제작하기

 

개인 페이지 와이어 프레임

1. 상단: 사진 슬라이드 영역

구현 의도

• 여러 장의 내 사진
• 좌우 스와이프 가능

구현 방식

• UIScrollView (pagingEnabled)
• UIStackView (horizontal layout)

이미지 처리

이미지 이름 배열을 반복문으로 순회하며 각 이미지에 대해 UIImageView를 생성하였다.

• 각 이미지 뷰는 스택뷰에 가로로 추가되며,
• 이미지 한 장의 너비를 화면 너비와 동일하게 설정하여 스와이프 시 한 장씩 정확하게 전환되도록 구성하였다.
• contentMode = .scaleAspectFill과 clipsToBounds = true를 적용하여
• 이미지가 영역을 꽉 채우되 넘치는 부분은 잘리도록 처리하였다.

 

2. 중단: 링크 아이콘 버튼 영역

구현 의도

• 로고(이미지) 버튼
• 눌렀을 때:
  • GitHub → GitHub 프로필
  • Tistory → 티스토리 블로그
  • Mail → 사용자의 메일 앱 열기 (mailto:)

구현 방식

UIStackView를 활용하여 여러 개의 아이콘 버튼을 가로로 정렬하였다.

• 버튼들은 가로 방향(.horizontal)으로 배치되며,
• 일정한 간격(spacing = 24)을 두어 시각적으로 구분되도록 구성하였다.
• 중앙 정렬(alignment = .center)을 통해 화면 균형을 유지하였다.

버튼 구성

각 버튼은 UIButton(type: .system)을 사용하여 생성하였으며,

아이콘 이미지를 버튼의 이미지로 설정하였다.

• withRenderingMode(.alwaysOriginal)을 적용하여 시스템 색상에 영향을 받지 않고 원본 아이콘 색상을 유지하도록 하였다.
• 버튼 크기를 44×44pt로 통일하여 터치 영역과 접근성을 고려하였다.

동작 처리

각 버튼에는 UIAction을 사용하여 터치 이벤트를 처리하였다.

버튼 클릭 시 UIApplication.shared.open(_:)을 통해 외부 URL을 안전하게 호출하도록 구현하였다.

 

3. 하단: 자기소개 정보 리스트

구현 의도

• 개발자의 기본 정보 전달
• 이름, 직무, 전공, mbti, 성향, 사진 등
• 현재 진행중인 프로젝트 전달

전체적인 구조

자기소개 영역은 UIStackView를 활용해 헤더 영역 → 기본 정보 → 프로젝트 정보의 3단 구조로 구성하였다.

각 영역은 시각적으로 구분되도록 간격과 정렬을 조절하였다.

[ Header Stack ] 김주희 iOS Developer

[ Info Stack ] • 전공 • MBTI

[ Projectbox Stack ] • 현재 진행 중인 프로젝트 설명

1️⃣ 헤더 영역 (이름 + 직무)

• 이름은 큰 글씨와 굵은 폰트를 사용해 시선을 먼저 끌도록 하였고,
• 직무는 보조 텍스트 색상(secondaryLabel)을 사용해 위계를 구분하였다.
• 두 텍스트는 세로 방향 UIStackView로 묶어 정렬과 간격을 일관되게 관리하였다.

---

2️⃣ 기본 정보 영역 (전공 · 성향)

헤더 아래에는 개발자의 기본 정보를 간단한 텍스트 형태로 배치하였다.

• 이 영역 역시 UIStackView를 사용해 세로 정렬로 구성하였다.

---

3️⃣ 프로젝트 영역 (박스 형태 강조)

현재 진행 중인 프로젝트는 다른 정보와 시각적으로 구분하기 위해

회색 배경의 박스 형태로 강조하였다.

• UIStackView에 배경색과 cornerRadius를 적용해 카드 형태의 UI를 구현하였다.
• 내부 여백(layoutMargins)을 설정하여 텍스트가 가장자리와 붙지 않도록 하였다.
• 제목과 내용을 분리하여 프로젝트의 상태와 설명이 명확히 드러나도록 구성하였다.

---

레이아웃 구성

자기소개 전체 영역은 상단의 링크 버튼 영역 바로 아래에 배치되며,

좌우 여백을 일정하게 주어 화면 크기에 관계없이 안정적인 레이아웃을 유지하도록

Auto Layout을 적용하였다.

---

핵심 사용 기술 요약

• UIStackView를 활용한 계층적 UI 구성
• 텍스트 정보의 중요도에 따른 폰트 및 색상 분리
• 배경색·cornerRadius·padding을 활용한 카드형 UI
• Auto Layout 기반 상대 배치

 

전체 컴포넌트 구조 정리

 

 

 

까지 어찌저찌 하루종일했는데 내가 겪은 오류들은 작성 못했다ㅠ

이놈의 완벽주의 언제 벗어날건지 오늘 쏘카 현직 iOS개발자님께서도 말씀하셨든 오류기록, 극복방법, 느꼇던 점은 바로바로 적어놓아야겠다.. 

그리고 참 감동적인 나의 지피F..

 

끝까지 같이 간다.!!!!!!!!!!!!!!!!!1

 

일주일중 5일을 12시간 공부? 이걸 5개월? 하다가 졸도하거나 실려가면 어떡하지? 싶었는데

아직 이틀차긴 하지만 생각보다 배우는게 너무너무 재밌고 특강도 재밌고 튜터님이랑 면담하는것도 재밌고 지피티랑 제미나이한테 사자후 날리는것도 재밌고 팀원분들이랑 결과물 공유하는것도 재미나고.. 암튼 내가 할 수 있는 표현이 모자른거지 너무너무 재밌다!!

 

그리고 오늘 줏어들었던 클린 아키텍처 mvvm..이랑 또 뭐더라 네트워크 동기/비동기 이런거 배울때도 재밌다고 느끼길..ㅠㅠ 제발!!