과제 3번 3️⃣
다양한 Constraint 제약 조건을 통해 실제 프로덕트 애플리케이션 프론트 구성해보기
원래 넷플릭스 프론트화면을 만들어보려고 했으나.. 너무 복잡한 UI로 구성이 되어있기때문에.. 배달의 민족으로 방향을 틀었다..
나중에 코드베이스로 작업하게되면 넷플릭스같은 좀 더 복잡한 프론트에 도전해보겠음..
내가 만들어보려고 했던 배달의 민족 프론트 예시
진짜 아예 아무것도 모르는 상태에서 이것저것 찾아보고 처음부터 하느라 시간이 꽤 걸렸다..
https://youtu.be/1McZ6ukrmFo <- 유튜버 정대리님의 Auto Layout강좌가 정말 큰 도움이 됐다.. 혹시 아직 Auto Layout의 개념이 안잡히신 분들이면 반드시 들어보는걸 추천..
최대한 다양한 컴포넌트를 써보려고했지만 스토리보드상에서만 진행되다보니 사용할 수 있는 컴포넌트의 폭이 그리 넓지는 않았다..
아직 내가 모르는건지 아니면 진짜 그런건지는 모르겠지만, 최소한의 코드로 최대한의 View를 뽑아보려고 노력했다..
결과물
사용된 컴포넌트
- Label
- Button
- Text Field
- Horizontal Stack View
- Image View
- Scroll View
- View
대략적인 구성과정
-
우선 Scroll view를 화면에 가득차게 넣어주고 그 안에 Height 1500정도 되게끔 View를 다시 넣어줌
-
어쩔수없는 이모지나 그림같은거는 부분캡쳐해서 Image View로 넣어주고 나머지는 Button이나 Label로 일일히 설정해줌
-
세로 Scroll View안에 가로 Scroll View를 다시 만들어서 Horizontal Stack View를 넣고 그 안에 다시 View를 쌓아서 스크롤 가능한 메뉴를 편성해줌
-
그림자효과 혹은 cornerRadius를 줘야하는 상황은 따로 Outlet 변수 만들어서 코드상에서 설정해줌(매우 간단)
이번주 과제를 하면서 느낀점
-
처음에는 "이걸 내가 왜...?" 라는 생각으로 시작했지만 직접 View를 구성할때는 정말 큰 도움이 되었음.. 컴포넌트들을 일일히 조사했기 때문에 이런 View는 이 컴포넌트를 통해 만들수있고 저거는 이 컴포넌트를 통해 만들수있다 라는걸 숙지할수 있었음
-
AutoLayout은 아직도 배워야 할게 많지만 직접 깨지면서 배워보는게 가장 빠르고 정확한 방법이라는것을 깨달았음. 특히 이 깨달음을 글로 정리하거나 말로 설명하고싶어도 정리가 잘 안됨.. 다른 사람들도 그럴거라고 생각..
-
AutoLayout을 적용했기 때문에 아이폰 13pro에서만이 아니라 다음과 같은 아이폰8에서도 화면깨짐없이 잘 돌아감
- 아직 복잡한 기능이나 View는 구성못하지만 얼른 배워보고싶다는 생각이 듦..! 😃
