라티의 작은 일기장

오늘은 계산기 앱의 UI를 구성하는 두 번째 회차이다. 어제는 앱 UI의 기본적인 틀을 완성했다면 오늘은 색을 입힐 차례! 일단 Button들의 Title을 iOS 기본 계산기 앱과 동일하게 보이도록 변경해주자. 어제 AC 버튼 오른쪽 버튼이 연산 결과를 출력하는 '=' 이라고 적었었는데, iOS 기본 계산기 앱 기준으로는 나누기에 해당한다... ㅎㅎ 그래서 똑같이 바꿔나가다 보면... 1과 2 아래 버튼 2개가 iOS 계산기 앱에서는 0을 나타내는 하나의 버튼임을 발견하게 된다! 2 아래의 버튼을 지워주고, 1 아래의 버튼의 Aspect Ratio 제약조건을 삭제한 뒤, 어제 AC 버튼에 대해서 Size를 조정한 방식을 적용시켜주자. 그리고 다음과 같은 과정을 따라 UI에 스타일을 입혀주면 다음과 같은..

챌린지 종료 3일 전이다. 챌린지 종료까지 계산기 앱을 다 만들 수 있길... 우선 계산기 앱을 위한 새로운 프로젝트를 생성하고 메인 스토리보드를 불러와보자. 그리고 계산 결과를 출력할 Label을 하나 생성한 뒤, 제약 조건을 다음과 같이 추가해주자. 실수로 사진에는 포함시키지 않았는데 Height 값도 150으로 설정하자. 그럼 이렇게 결과를 표시하는 화면의 틀은 잡혔다. 다음은 계산기의 키패드(숫자, 기능)를 어제 배운 UIStackView를 활용해서 만들어보자. 일단 키패드 View로 활용할 UIView를 하나 추가한 뒤, 제약조건을 Top, Leading, Trail, Bottom 모두 24로 설정해주자. 그리고 해당 View 안에 다음과 같이 총 18개의 UIButton을 추가하면 된다. 뭔가..

남은 챌린지 기간동안 만들 앱은 iOS 기본 내장 앱인 "계산기 앱"이다. 물론 원본과 비교하면 몇 개의 기능이 빠지고 가로모드도 지원하지 않는 것 같지만... 기본적인 사칙연산과 계산기 앱의 특징인 "누적연산" 및 "계산 초기화" 기능은 구현되어있다. 앱의 기능적 요구사항을 나열해보면 다음과 같다. 앱 UI의 숫자와 연산자를 활용하여 기본적인 사칙연산 및 소숫점 연산을 할 수 있다. "AC" 버튼을 누르면 현재까지 계산된 결과가 초기화되고 숫자는 0으로 초기화 된다. 계산은 단일 연산이 끝났을 때 초기화되지 않고, 연산 결과에 대해 추가적인 연산을 할 수 있다. (누적 연산) 활용될 기술 스택은 다음과 같다. UIStackView : 계산기 앱의 UI를 구성 IBDesignables, IBInspect..

오늘은 LED 전광판 앱의 기능 구현을 마무리할 것이다. 어제는 설정 화면에 있는 컴포넌트에 대해 클래스에 인스턴스를 만들어주고, 관련된 함수를 정의했었는데, 오늘은 설정 화면에서 선택한 값들이 메인 화면에 반영되도록 하는 기능을 완성하려고 한다. 설정 화면에서 선택한 값들을 메인 화면으로 보내주려면, 지난번에 공부했던 Delegate 패턴을 사용해야 한다. SettingViewController에 LEDSetting이라는 프로토콜부터 선언해주자. protocol LEDBoardSettingDelegate: AnyObject { func changedSetting(text: String?, textColor: UIColor, backgroudColor: UIColor) } changedSetting 함수..

오늘은 드디어 LED 전광판 앱의 기능을 구현해보는 실습을 진행한다. 앱의 기본적인 기능은 글자와 배경의 색을 입혀 보여주는 것이지만, 오늘 구현할 기능은 그것에 앞서 설정화면에서 각 컴포넌트의 색상을 선택했을 때, 그것이 선택되었다고 알려주는 기능이다. 말로만 들으면 별로 중요해보이지 않는 기능이지만 구현이 끝나고나서 생각해보면 또 다를 것이다. 우선 설정 화면의 기능을 담당하는 SettingViewController 파일을 프로젝트 폴더에 추가해보자. 그리고 해당 파일을 스토리보드에 연결하고 Assistant까지 띄워보면 이렇게 될 것이다. 이제 스토리보드에 있는 각 VC 내 컴포넌트에 대해 Outlet 변수를 선언할 것이다. 우선 전광판 화면에 있는 중앙의 큰 Label을 contentLabel이라..

어제 부로 UI 구현이 다 끝난 줄 알았는데...! 오늘 강의 내용을 보니 아직 하나 더 남은 것 같다... 아이고.. 추가할 UI는 뭐 그렇게 대단한건 아니고 설정 화면을 이미지 파일을 활용해서 꾸며주려고 한다. 실제 서비스를 위한 앱 또는 웹 사이트를 개발하게되면, 아주 많은 양의 에셋 파일(이미지, 소리, 영상, 폰트 등)들을 활용하게 되는데, 아주 간단한 형태의 JSP 웹 사이트를 개발할 때에도 프로젝트 홈 디렉토리에 "assets"라고 하는 디렉토리를 따로 만들어서 관리하게 된다. Xcode에서 앱 개발을 할 때에도 똑같이 에셋 파일을 관리하는 공간을 두게 된다. 사실 이미 만들어져 있을 것이다. 프로젝트 폴더 내에 Assets 또는 Assets.xcassets라고 하는 것을 찾을 수 있는데, ..

오늘은 LED 전광판 앱의 UI 구현의 나머지 부분을 처리할 것이다. 지난 번에 구현한 화면은 앱에서 전광판이 비춰지는 메인(Main) 화면이었고, 오늘은 전광판의 내부 설정값(문자열 값과 폰트 설정)을 변경할 수 있는 설정(Settings)화면을 만들게 된다. 일단 메인 스토리보드에서 새로운 View Controller를 하나 추가해주자. 그리고 전광판 메인 화면에서 우측 상단의 "설정" 버튼을 눌렀을 때 이 View Controller로 화면이 전환되어야 하므로, 설정 버튼에 새롭게 추가한 View Controller에 대해 Action Segueway를 설정하자. 이제 설정 화면에 포함될 컴포넌트를 하나씩 채워보자. 우선 사용자로 하여금 이 화면이 앱의 설정을 위한 화면인 것을 알게하기 위해 상단의..

이제 드디어 LED 전광판 앱의 UI를 그리는 단계로 들어섰다! 기존에 화면 전환, 화면(View)간 데이터 전달을 위한 예제 실습용 프로젝트가 아닌, LED 전광판 앱 개발 실습을 위한 프로젝트 "LEDBoard"를 따로 생성해주자! 그리고 실습에서 그랬던 것 처럼 화면 전환을 위해 Navigation Controller를 추가하자. 그리고 똑같이 디폴트로 생성된 View Controller를 지우고 기존에 생성된 VC를 Navigation Controller의 Root VC로 지정해보자. 그럼 대충 이런 모양이 된다. (놀랍게도, Root VC를 위한 스토리보드 진입점을 나타내는 화살표는 Drag&Drop 방식으로 VC를 넘나들 수 있었다!) 그리고 우클릭 드래그를 통해 초기 VC를 Root VC로 ..