언클린 코더

이번 글에서는 무엇을 만들어볼까 생각을 하다가 디자인도 같이 공부할 수 있는 것으로 생각하다가 아날로그시계를 생각해내게 되었습니다. 아날로그시계의 좋은 점은 디자인도 공부할 수 있고 수학적인 계산 그리고 애니메이션도 만져볼 수 있어 여러 가지 방면에서 공부가 될 것 같습니다. 크게 어렵지 않기 때문에 하나하나씩 따라하시면서 만들어 보시면 됩니다. (사용한 이미지는 무료 템플릿을 다운 받아 직접 웹 용 포토샵으로 수정하였습니다.) 1. 디자인 이번 프로젝트에서는 좀 더 확실한 공부를 하기 위해서 다양한 단말에도 맞춘 레이아웃을 구성해 보았습니다. 앱 개발 디자인에 있어서 다양한 단말에 맞추는 것이 중요하기 때문에 어떻게 구성할지 생각하면서 하나하나씩 만들어 나아가면 됩니다. 저와 같은 경우는 아래와 같이 ..

이번에 만들어 볼 것은 달력입니다. 구성은 간단합니다. 달력 구성에는 CollectionView를 사용했으면 계산으로는 DateComponent를 사용했습니다. 하나하나씩 따라 해주시면 됩니다. 1. Storyboard에 CollectionView 생성 storyboard에서 collectionView를 생성합니다. 저는 간단히 월 단위를 제어하는 뷰를 생성하여 top에 맞추어 주었고, 그 밑에는 간단히 CollectionView를 넣어주었습니다. 이 CollectionView에서 요일 섹션과 일 별 섹션을 나누어 할당할 것입니다. Cell은 커스텀 셀을 사용했습니다. 2. 커스텀 Cell 생성 사실 이번 앱에서는 셀을 이용한 기능이 없기 때문에 커스텀 셀을 사용하지 않아도 되지만, 저는 주로 커스텀 뷰..

이전에 만든 앱에서 디자인과 판 수를 설정할 수 있도록 추가해 보겠습니다. 디자인은 무료 디자인을 사용했으며 글씨같은 것은 직접 포토샵으로 만들었습니다. (디자인이 제일 힘든 것 같습니다...) 이번에도 어련운 것은 없기 때문에 빠르게 진행해 보겠습니다. 1. Storyboard에 디자인 작성 이번에는 딱히 화면전환을 만들지 않고 그냥 그 위에 커버 뷰를 하나 생성하여 씌웠다가 표시하고 숨기고 하는 방식으로 진행하였습니다. 향후에 메인 화면 게임 화면을 구성하여 만들고 싶으신 분은 추가해서 대응하시면 될 것 같습니다. 2. 판수 설정 판을 5전 3승과 같이 설정할 수 있도록 하는 메소드를 작성해 보겠습니다. 우선 게임 스타트 버튼을 눌렀을 때 보여지고 있는 커버 뷰를 지우고 이긴 횟 수, 진 횟 수를 초..

저번 스톱워치를 만들고 나서 다음에는 어떤 것을 만들어 볼까 생각하다가 현재 진행 중인 개인 프로젝트도 있고 해서 연습 삼아 간단한 게임을 하나 만들어보려고 합니다. 크게 어려움은 없어서 따라 하기 쉽거나 아니면 더욱 쉽게 만드실 수 있을 거라고 생각합니다. (이런 저런 것을 사용해보면서 감각을 늘려나가신다 생각하시면 될 것 같습니다.) 1. Storyboard에 디자인 작성 자신의 감각을 살려서 간단하게 디자인을 만들어줍니다. 저 같은 경우는 컴퓨터의 출력 값을 나타내는 라벨, 이겼는지 졌는지 혹은 비겼는지를 나타내는 결과 라벨 그리고 자신이 낼 수 있는 가위, 바위, 보 각각의 버튼 그 버튼들을 감싸는 스택 뷰 정도만 사용하였습니다. (제약은 결과 라벨을 중앙을 기준으로 적당히 설정하였습니다.) 2...

전 글에서 제작한 베이스에서 타임 기능 등을 추가해 타임 워치를 완성시켜보겠습니다. 추가될 기능은 아래와 같습니다. 1. 시작과 기록의 상태를 관리하는 변수 2. 타이머 3. 테이블 뷰를 자동으로 스크롤시키기 그럼 시작해보겠습니다. 1. State 설정 저는 시작 버튼으로 기록까지 기능을 구현할 것이기 때문에 상태를 지정해서 처리를 나눌 수 있도록 해보았습니다. 그러기 위해서 enum을 사용해서 상태를 관리하는 것이 편합니다. 그리고 초기 설정을 지정! /// 시작과 기록의 상태 enum WatchStatus { case start case stop } /// 버튼의 상태 var watchStatus: WatchStatus = .start 2. 타이머 개시 이제 타이머를 실행해 보겠습니다. 타이머의 ti..

오늘은 간단한 프로젝트를 하나 진행해보겠습니다. 주제는 타임 워치입니다. 간단하면서도 뭔가 만들었다는 성취감을 느낄 수 있는 프로젝트가 될 것 같습니다. 이번 글에서의 스톱 워치는 기능으로는 아래와 같습니다. 1. 시작 2. 기록 (버튼으로는 Stop) 3. 리셋 (한 번 누를 시 모든 기록 삭제, 모든 기록이 삭제되어 있는 상태에서 한 번 더 누르면 종료) 그러면 Step 1으로서 디자인 과정부터 시작해보겠습니다. 1. 프로젝트 생성 가장 처음에 진행하는 작업인 프로젝트 생성입니다. 자유롭게 프로젝트 명 설정을 해주시면 됩니다. 2. 디자인 구성 제가 이번 과정에서 쓴 컨트롤은 라벨, 버튼, 테이블 뷰, 테이블 뷰 셀입니다. 그리고 라벨과 버튼 같은 경우는 여러 개를 나열해서 사용하기 때문에 스택 뷰를..