iOS 프로젝트

[iOS/부스트 코스] iOS 앱 프로그래밍: Sign Up(2) - 화면 구성하기 안녕하세요. 개발하는 정주입니다. 오늘은 네이버 부스트 코스 프로젝트 B-Sign Up의 화면 구성하기를 포스팅하려고 합니다. 목차 공통 모든 화면은 가로로 돌렸을 때 사용성에 이상이 없을 정도의 레이아웃이어야 합니다. 예를 들어, 버튼 가려지거나, 지나치게 레이아웃이 훼손이 되면 안 됩니다. 이를 생각하고 모든 화면을 구성하였습니다. 로그인 화면 로그인 화면입니다. 최상단에 로고 이미지가 있고 ID 텍스트 필드와 Password 텍스트 필드가 있습니다. 그 아래에는 Sign In, Sign UP 버튼이 있습니다. 이 화면에서 헤맨 점은 기기를 가로로 눕혔을 때 레이아웃 배치입니다. 하단 버튼의 bottom 제약을 주지 ..

[iOS/부스트 코스] iOS 앱 프로그래밍: Sign Up(1) - 사전 탐구 안녕하세요. 개발하는 정주입니다. 오늘은 네이버 부스트 코스 프로젝트 B-Sign Up의 사전 탐구에 대해 포스팅하려고 합니다. 목차 화면 1 - 로그인 화면 Password TextField는 마스킹이 되어야 한다. 화면 2 - 회원가입 화면(기본정보) 프로필 이미지의 비율은 1:1이다. 프로필 이미지는 원본 비율을 유지해야 한다. 세 개의 TextField는 여백이 동일하다(균등 분배). 패스워드와 패스워드 체크 TextField는 마스킹이 되어야 한다. 중간 자기소개 TextField는 상하 View를 배치한 뒤 빈 여백을 모두 채운다. 자기소개 TextField는 내부 패딩이 존재하며 왼쪽 위부터 글자가 작성된다. 다..

[iOS/부스트 코스] iOS 앱 프로그래밍: Music Player(4) - 오토 레이아웃 적용 / 코드로 View 생성 안녕하세요. 개발하는 정주입니다. 오늘은 오토 레이아웃 적용과 코드로 View 생성에 대해 포스팅하려고 합니다. 참고로 iOS에서는 인터페이스 빌더로 화면을 구성하는 방법과 코드로 화면을 구성하는 방법이 다릅니다. 스토리보드를 이용하면 눈에 보이기 때문에 화면 구성이 편리하다는 장점이 있지만 협업에서 머지 과정 중에 충돌이 자주 발생한다는 단점이 있습니다. 코드를 이용하면 직관성은 떨어져도 협업에서는 오히려 더 편하다고 합니다. 결론은 둘 다 사용해야 한다는 점! 화이팅입니다. 오토 레이아웃 적용 (인터페이스 빌더) 인터페이스 빌더로 오토 레이아웃 적용을 먼저 해보겠습니다. 하는 방..

[iOS/부스트 코스] iOS 앱 프로그래밍: Music Player(3) - 기능 구현 안녕하세요. 개발하는 정주입니다. 오늘은 Music Player(3) - 기능 구현에 대해 포스팅하려고 합니다. 구현해야 하는 기능 종류 1. 버튼을 누르면 음원이 play/pause가 되고 아이콘이 바뀐다. 2. 음원 진행 사항에 따라 Slider와 타임 레이블의 텍스트가 변경된다. 3. Slider를 움직이면 타임 레이블 텍스트가 변경된다. 4. Slider를 움직이는 동안은 음원이 계속 재생된다. 5. Slider를 놓으면 해당 지점으로 음원이 점프된다. 6. 재생이 끝나면 play 버튼으로 변경되고 Slider와 타임 레이블이 초기화된다. 음원 기능 iOS에서 음원은 AVAudioPlayer 클래스를 이용합니..

[iOS/부스트 코스] iOS 앱 프로그래밍: Music Player(2) - 화면 구성 안녕하세요. 개발하는 정주입니다. 오늘은 iOS 앱 프로그래밍 Music Player 화면 구성에 대해 포스팅하려고 합니다. 오토 레이아웃은 추후 작업합니다. 첫 번째 프로젝트인 만큼 아주 간단합니다. Play/Puase 버튼 버튼을 추가해줍니다. 라이브러리 추가 단축키는 Command + Shift + L입니다. Object에 Button을 검색해도 되고 왼쪽에 보이는 Button으로 추가해도 됩니다. 버튼의 Type은 Custom으로 변경하고 Style은 Default로 변경합니다. Type을 변경하는 이유는 버튼에 이미지를 넣기 위해서 입니다.위해서입니다. Style을 변경하는 이유는 Selected에 따라 이..

[iOS/부스트 코스] iOS 앱 프로그래밍: Music Player(1) - 사전 탐구 안녕하세요. 개발하는 정주입니다. 오늘은 Music Player 사전 탐구에 대해 포스팅하려고 합니다. 예제를 따라 하고, 구현해보기 전에 결과물 영상을 보며 어떤 특징이 있는지, 어떤 점이 핵심인지 탐구해보는 시간을 가졌습니다. 레이아웃 모든 뷰가 가로 중앙 정렬된다. 기기를 회전해도 비율 유지된다. 기능 버튼을 누르면 음원이 play/pause가 되고 아이콘이 바뀐다. 음원 진행 사항에 따라 Slider와 타이머가 변경된다. Slider를 움직이면 타이머 숫자가 변경된다. Slider를 움직이는 동안은 음원이 계속 재생된다. Slider를 놓으면 해당 지점으로 음원이 점프된다. 재생이 끝나면 play 버튼으로 변..

[iOS/부스트 코스] iOS 앱 프로그래밍 - iOS 앱 프로그래밍 부스트 코스 시작 안녕하세요. 개발하는 정주입니다. 오늘은 iOS 앱 프로그래밍 부스트 코스에 대해 포스팅하려고 합니다. 시작 다짐 iOS 앱 프로그래밍 부스트 코스는 개념 부분과 프로젝트 부분으로 진행됩니다. 블로그에는 개념 부분과 프로젝트 진행 사항을 기록하려고 합니다. 프로젝트 파일은 Git에 private repository로 업로드할 것입니다. 원래는 public으로 진행하려고 했지만 부스트 코스의 규칙으로 인해 공개된 repository에 올리기로 한 계획을 수정하였습니다. 조금씩 꾸준히 진행하고자 합니다. +수정 첫 프로젝트인 Music Player는 강사의 코드를 따라가는 형태입니다. 첫 프로젝트는 public으로 업로드..

[iOS 앱 개발] FirstApp (4) - 북마크 버튼 이벤트 / UIImageView 클릭 이벤트 안녕하세요. 개발하는 정주입니다. 오늘은 FirstApp 네 번째 이야기, 북마크 버튼 이벤트에 대해 포스팅하려고 합니다. 버튼 이벤트를 처리하려고 하는데 UIButton이 아닌 UIImageView로 선언한 이유는 뷰의 이벤트를 처리해보고 싶었기 때문입니다. 동작 영상은 하단에 있습니다. 그럼 차근차근 해보겠습니다. 프로젝트 Git 링크 https://github.com/jeongju9216/firstApp GitHub - jeongju9216/firstApp: 정주의 iOS 첫 번째 앱 정주의 iOS 첫 번째 앱. Contribute to jeongju9216/firstApp development ..

[iOS 앱 개발] FirstApp (3) - Swift 5 백그라운드 색상 적용 / set Background Color 안녕하세요. 개발하는 정주입니다. 오늘은 FirstApp 세 번째 이야기, 백그라운드 색상 적용에 대해 포스팅하려고 합니다. 입력한 색상 코드로 메인 이미지의 테두리 색깔을 변경하는 작업입니다. 쉬울 줄 알았지만 낯선 작업 환경에 당황한 스토리가 기다리고 있습니다. 맨 아래 오늘 작업한 내용의 완성 영상이 있으니 끝까지 봐주세요! 바로 시작합니다. 프로젝트 Git 링크 https://github.com/jeongju9216/firstApp GitHub - jeongju9216/firstApp: 정주의 iOS 첫 번째 앱 정주의 iOS 첫 번째 앱. Contribute to jeo..

[iOS 앱 개발] FirstApp (2) - 오토 레이아웃 적용 안녕하세요. 개발하는 정주입니다. 오늘은 FirstApp 두 번째 이야기, 오토 레이아웃 적용에 대해 포스팅하려고 합니다. 모든 기기에서 동일한 위치에 뷰가 나오게 하는 것은 기본 중에 기본입니다. 그것을 가능하게 해주는 것이 오토 레이아웃입니다. 이제 시작합니다. 오토 레이아웃 적용 버튼 위치 스토리보드 파일을 열면 위와 같이 나올 겁니다. 기본적으로 뷰들을 대강 배치시키고 시작하면 됩니다. 그리고 위 사진의 빨간색 네모칸 부분이 오늘의 핵심 부분입니다. 오토 레이아웃 버튼 오토 레이아웃 버튼은 세 번째 버튼입니다. 버튼을 누르면 "Add New Constraints"라는 팝업이 나옵니다. 뷰에 화면에 관한 제약을 추가하여 일정한 위치에..