iOS/힙한 UI 따라 만들기 (3) 썸네일형 리스트형 iOS 힙한 UI 따라 만들기 Ep.03 "Frip" 홈 화면 UICompositionalLayout으로 만들기👋 오랜만에 3번째 에피소드로 돌아왔습니다 👋 이번에는 최근 업데이트된 Frip앱의 홈화면을 UICompositionalLayout으로 만들어보려고 합니다. (물론 제가 몸담고 있어서 힙하다고 얘기하는 것은..아니고..흠흠) 요즘 커머스앱을 들어가면 대부분 이런방식으로 여러가지 형태의 내용들이 들어간 스크롤 형식의 뷰가 보여지곤합니다. 옛날에는 이런 화면들 도대체 어떻게 만들지 싶은 생각도 들고, 만들어도 무언가.. 엄청 복잡하게만 만들어져서 깔끔하게 만들어보고 싶다는 생각이 들곤 했었습니다. 이전에는 어떻게 만들었나? UICompositionalLayout으로 만들기 전에 이런 화면들은 UICollectionViewCell안에 다른 UICollectionView를 정의하여 사용하곤 했습니다. 그렇게 만들고.. iOS 힙한 UI 따라 만들기 Ep.02 "Airbnb" 검색창이 거치면서 화면이 바뀌는 트랜지션 만들기👋 이번에는 Airbnb앱을 진입하자마자 보이는 검색창을 눌렀을때 보여지는 트랜지션 효과를 따라 만들려고합니다! 막상 앱을 사용할때는 생각없이 사용해서 그런지.. 그냥 무심코 넘어갔는데 이거를 어떻게 구현했지?? 라고 생각하면서 다시보게되니 막막하더군요.. 내가 아는 트랜지션은 오른쪽에서 왼쪽으로 들어오는 pushViewController와 아래에서 위로 올라오는 present뿐인데.. 그래서 커스텀 뷰 컨트롤러 트랜지션에 대해서 먼저 찾아봤습니다. 참고 링크 유튜브에 튜토리얼식으로 잘 나와있더군요 🙇♂️ 저는 아래 영상과 링크들을 보고 도움을 많이 얻었어요! 아래 튜토리얼 영상을 그대로 따라해보는것도 좋을 것 같습니다. iOS Swift Tutorial: Create a Circular Transitio.. iOS 힙한 UI 따라 만들기 Ep.01 "에이블리, 배민" 헤더가 고정되는 테이블 뷰 만들기👋 일상 생활을 하면서 정말 많이 쓰이는 힙한 앱들이 많은데 그 앱에서 보여주는 UI에 대해서 당연하게 사용만 해보고 구현 방법에 대해서는 깊게 생각해본적이 별로 없는 것 같습니다..😭 힙한 서비스, UI/UX를 구현하고싶지만 지금의 실력으로는 구현하는데 생각보다 어려울 것 같아보여서 힙한 서비스들에서 보여지는 UI들을 따라 만들어보자!!는 생각이 들었습니다. 그래서 지금부터라도 서비스들을 분석하면서 하나씩 따라만들어볼 예정입니다. 헤더가 고정되는 테이블 뷰? 에이블리나 배민에서 옷 상세화면, 가게 상세화면으로 들어가면 스크롤을 내릴수록 상단 네비게이션 바가 나타나게됩니다. 그리고 탭이 나타나면 상단 네비게이션에 탭이 걸리게되는 그런 뷰를 보게되었어요! 별거 아닌 것 같은데 트랜디해 보이기는 한데 막상 만들.. 이전 1 다음
