본문 바로가기

분류 전체보기

 (351)
ParallaxEffect 구조 구조는 단순하다. ScrollView 내에 상단에 이미지를 표시할 여백과 내용을 표시할 VStack 등의 View가 존재한다. 구현 ContentList struct ContentList: View { var body: some View { VStack(alignment: .leading) { ForEach(0.. 0 Spacer() .frame(height: isScrolled ? 400 + offsetY : 400) .background { Image("sample") .resizable() .scaledToFill() .offset(y: isScrolled ? -offsetY : 0) .blur(radius: isScrolled ? offsetY / 20 : 0) } } .frame(heigh..
app-ads.txt 문제를 firebase로 해결해 보자. 포스팅이 잠깐 뜸한 사이 앱을 출시했다. 초기버전은 심사 통과가 목적이었기 때문에 구현하려던 몇 가지 기능을 포기한 상태였는데 그중 하나가 배너 광고이다. admob을 사용해 배너 광고를 다는 것까지는 좋았는데 이내 위와 같은 알림이 등장했다. 뭐 대단한 수익을 바라고 탑재하는 것은 아니지만 문제가 생길 수 있다니 이번 기회에 어떻게 하는 건지 알아 두도록 하자. 보통은 개발자 홈페이지나 blogger를 사용하는데, 내 경우 개발자 페이지는 존재하지도 않고, 앱 상세 페이지 등을 전부 티스토리의 페이지로 연결해 사용하고 있다. 가장 이상적인 방법은 티스토리에 해당 파일을 추가하는 것인데 23년 6월 기준 어떤 방법을 써도 티스토리로는 불가능하니 마음 편하게 다른 방법을 찾아보는 것이 좋다. 그렇게 대안으..
JusTheme [Privacy Policy] Privacy Policy MinKyu, CHA built the JusTheme app as a Free app. This SERVICE is provided by MinKyu, CHA at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information i..
AutoScrolling #06 지금 상태로도 매우 좋지만 밝은 사진과 어두운 사진일 때 Indicator가 다소 단조로워 보이는 것이 아쉽다. 이미지의 평균 색상을 추출하기 iOS나 Mac OS의 현행 디자인 코드는 Flat으로 음영과 그림자 등의 그래픽 적인 요소들을 최대한 배제하고, 색과 선, 레이어의 적층으로 깊이와 구분감을 부여하는 것이 특징이다. 개인적으로 이러한 chillog.page 표시되는 이미지의 평균 적인 색상을 추출할 수 있는 방법이 존재하는데, 이미 작성한 포스팅을 기반으로 적용해 조금 더 자연스럽게 만들어 보자. AverageColorModifier.swift // // AverageColorModifier.swift // AutoScrolling // // Created by Martin.Q on 2023/0..
Github에 push가 안 되는 경우 아 세상에... 별 거 안 건드렸는데(프로젝트를 클로닝 하고 Xcode 베탈 깔긴 했다 🤣) 작업한 내용이 local에서 remote로 push가 되지 않는다. 😇 Xcode에 Github을 다시 연결해 봐도, remote를 몇 번 다시 연결해 봐도 상황은 변하지 않는다. 사실 비슷한 문제를 작년에 겪은 적이 있었다. 당시에는 지금보다 작업량이 더 많은 상황이었기 굉장히 패닉이었는데 덕분에 제대로 배웠는지 뭐가 문젠지 알 수 있었다. 위 사진을 보면 main branch의 head와 현재 local repogitory의 head가 어긋난 걸 알 수 있다. 지금 같은 상황이 펼쳐지면 remote, local, main 세 개의 head가 제멋대로인 상태라 상황을 한눈에 보기 어려운데, console로 보면..
이미지의 평균 색상을 추출하기 iOS나 Mac OS의 현행 디자인 코드는 Flat으로 음영과 그림자 등의 그래픽 적인 요소들을 최대한 배제하고, 색과 선, 레이어의 적층으로 깊이와 구분감을 부여하는 것이 특징이다. 개인적으로 이러한 상황에서 현재 시각적으로 가장 미려하다고 생각되는 부분은 바로 Material이다. SwiftUI에서 Blur를 사용하는 4가지 방법 Blur Apple Developer Documentation developer.apple.com struct ContentView: View { var body: some View { ZStack() { Image("bg.sample") .resizable() .ignoresSafeArea() .scaledToFill() .blur(radius: 20) Text("Blur..
AutoScrolling #05 Tab을 전환하는 방법은 반드시 하나만 있어야 하는 건 아니다. 지금처럼 Tab들을 좌우로 Swipe 하여 이동할 수도 있지만, Tab들의 이름을 직접 선택해 다음 Tab으로 이동하는 방식도 고려해 볼 수 있다. 이번엔 지금까지 구현한 Tab Indicator에 Tap Gesture를 추가해 Tab 간의 이동을 구현해 본다. TabGesture 추가 before func TabIndicatorView() -> some View { GeometryReader { let size = $0.size let tabWidth = size.width / 3 LazyHStack(spacing: 0) { ForEach(Tab.allCases, id: \.rawValue) { tab in Text(tab.rawValue..
AutoScrolling #04 이번에는 계산된 pageOffset을 기반으로 스크롤의 진행도를 계산한다. Home before let pageOffset = minX - (size.width * CGFloat(tab.index)) print(pageOffset) } 계산된 pageOffset를 출력하는 부분에서 이를 진행하면 될 것이다. after let pageOffset = minX - (size.width * CGFloat(tab.index)) let pageProgress = pageOffset / size.width scrollProgress = pageProgress } pageOffset을 다시 화면의 너비(사진의 너비)로 나누어 주면 다음과 같은 형태로 변환이 된다. imageView의 위치값(offset)이 progr..
AutoScrolling #03 이번엔 Tab Indicator에 적절한 animation을 추가하기 위해 필요한 준비를 해 본다. Tab before enum Tab: String, CaseIterable { case dance = "Dance" case fruite = "Fruite" case mirror = "Mirror" case night = "Night" case road = "Road" } after enum Tab: String, CaseIterable { case dance = "Dance" case fruite = "Fruite" case mirror = "Mirror" case night = "Night" case road = "Road" var index: Int { return Tab.allCases.firstI..
AutoScrolling #02 화면 구성에 필요한 기본 인터페이스를 디자인한다. 사진을 표시할 ImageView들로 구성된 TabView와 해당 TabView와 연동되는 Tab Indicator를 구성한다. ImageView extension Home { func TabImageView(_ tab: Tab) -> some View { GeometryReader { let size = $0.size Image(tab.rawValue) .resizable() .aspectRatio(contentMode: .fill) .frame(width: size.width, height: size.height) .clipped() } .ignoresSafeArea(.container, edges: .bottom) } } 표시할 이미지의 크기를 기기의..

티스토리툴바