LEEO TIL Dev Log

30개의 프로젝트를 만들고 있다가, 중간에 멈춰버린 프로젝트입니다. 이유는 간단했습니다. 테스트 코드를 어떻게 짜야하는지도 모르는데 TDD로 프로젝트를 시작했다가 낭패를 보았습니다. 이 프로젝트를 진행하면서 Test는 어떻게 할 수 있는 것이고 어느 부분을 할 수 있는지 나중에 공부하기로 미뤄두었습니다. 메인페이지 Test 페이지를 뺴면 그리 복잡한 앱은 아닙니다. 가장 메인에 테이블 뷰 하나를 만들어 줍니다. 그리고 우측 상단에 새로운 TodoList의 아이템을 추가할 수 있는 뷰를 하나 추가해주고, 마지막으로 투두 리스트를 눌렀을 때, 상세 내역이 보이도록 하는 디테일 뷰가 필요합니다. 기능 구현 추가는 원래 서버에 저장하고 잘 불러오는지에 대해서도 추가해야 하지만, 간단하게 앱내의 저장영역에 저장했습니다. 너무 길어지다 보니 애정도 떨어지고, 개발에 대한 흥미도 떨어지면서 완성을 제대로 하지 못했습니다. 나중에 기회가 된다면 다시 잘 만들고 싶은 앱 입니다. 테이블 뷰 이 이전 앱 부터 테이블 뷰를 쓰는 방법은 익혀왔고, 딱히 이 앱에서 더 특별한 것은 없어서 이렇게 간단히 구현하고 앱 구현을 마칠까 합니다.

개발자 혼자 토이 프로젝트를 하기 어려울 때, 인사이트를 얻기 위해 사용하는 앱 입니다. 디자이너를 위한 앱이라 그런지 디자인 적으로 굉장히 아름답다고 생각하면서 쓰고 있었는데, 이번에는 좀 더 들여다 보면서 UI/UX적으로 스스로 얼마나 볼 수 있는지 정리하고자 선택하게 되었습니다. 앱의 시작 런치 뷰 부터 감동이었습니다. 보통 스켈레톤은 디테일 페이지나, 다른 뷰로 넘어갈 때 로딩화면으로 쓰이는 걸로만 봤습니다. HIG에 보면 런치 뷰(앱의 맨 처음 시작화면)를 첫 화면과 비슷하게 구현해야 사용자가 기다림을 많이 느끼지 않고 무엇이 나올지 미리 예상할 수 있어서 앱을 바로 사용하기에 좋기에 권장하고 있는 방식입니다. 하지만 보통 기업의 앱은 광고 모델이 들어가거나, 자신들의 로고가 들어갑니다. 이해가 안돼는 부분은 아닙니다. 광고하기에 정말 좋은 포인트 이기 때문에 광고를 넣는 것 이라고 생각하기 때문입니다. 첫 화면과 런치뷰가 비슷하게 생건 것을 본 적이 없었는데, 처음으로 경험했고 매우 좋은 경험이었습니다. 앱의 구조 탭바로 되어있습니다. 총 5개의 메뉴이고, 탭바에는 아이콘만 그려져 있습니다. 홈, 검색, 동영상, 알림, 내정보 로 구분되어있는 것 처럼 보였습니다. 너무나 직관적인 아이콘이라 탭바에 글자로 설명이 필요해 보이지 않았습니다. 상단의 인스타그램의 스토리 처럼 구성된 동영상, 사진이 상단에 있었습니다. 그 뷰를 제외한 나머지는 카드로 이루어 져 있었습니다. 이미지가 로딩이 되어있지 않을때는 검정색 이미지를 플레이스홀더로 사용했고 쉐도우를 주어 약간 볼록 튀어나와 보이게 만든 카드가 굉장이 이뻐보였습니다. 플랫한 카드의 앱스토어와는 다른 매력이 있어 보였습니다. 개인적으로는 플랫 디자인 보다는 이게 더 입체감 있고 좋았습니다. 검색 굉장히 독특한 느낌의 검색이었습니다. 일단 하단에 필터가 상시로 떠 있어서 약간은 거슬리지만, 사라지지 않아 원할 때 마다 바꿀 수 있어서 좋았습니다. 이미지 검색은 컬렉션 뷰로 구현되어 있는 것 처럼

앱을 만들다보면, SingleView App에서 어느새 여러개의 화면전환이 필요한 순간이 오게됩니다. 그런데 화면 전환의 방법과 종류가 너무 많아서 어느 순간에 어떤 화면을 써야하는지 계속 찾계되어 정리하게 되었습니다. 화면 전환할 때, 이전 코드를 복사해서 쓰고있는 사람 다른 사람의 코드를 복사해서 화면전환을 하는 사람 이것 저것 다 해보다가 내가 원하는 결과가 나온사람 미래의 나 가 읽으면 좋을 것 같습니다. 화면전환                     화면 전환이란 다른 화면이 등장하는 것을 말합니다. 버튼을 눌렀을 때 혹은 테이블 뷰나 컬렉션 뷰의 셀을 눌렀을 때 다른 화면이 나오는 경우이죠. 보통 많이 사용했던 방법을 나열 해보면 아래와 같습니다. viewController에서 다른 viewController를 present 해줍니다. NavigationController에 embed 시켜고 다른 viewController를 push 합니다. 스토리 보드에서 seque를 이용해서 control키를 누르고 드래그로 나타날 화면을 지정 해줍니다. 모달이나 전체화면과 같은 화면의 종류에 대해서는 이 글에서 다루지 않겠습니다. modalPresentationStyle에 대한 글을 나중에 정리하게 되면 추가 해놓겠습니다. viewController에서 다른 viewController 부르기 viewController를 만드는 방법에는 저는 보통 2가지를 사용합니다. 코드로 만들거나, storyBoard에 뷰컨트롤러를 그립니다. 코드로 뷰 컨트롤러를 만들었을 때, present의 인자로 내가 만든 viewController의 인스턴스를 넘겨줍니다. 그러면 화면 전환이 일어납니다. @IBAction func clickPresentByCodeButton ( _ sender: Any) { let myViewController = MyViewController () self .present(myViewC

얼마전까지만 해도, 무겁고 낡아서 안쓸만한 앱이라고 생각하고 있던 쇼핑몰 앱 중 하나인 G마켓 앱을 다시 써 보았는데, 굉장히 많이 달라졌고 또 좋아져서 한 번 살펴보자! 하는 마음에 탐구를 시작하게 되었습니다. 앱실행 앱을 실행해서 가장 첫 페이지에 들어갔을 때, 서치 뷰컨트롤러에 애니메이션에 눈이갑니다. 런치에 애니메이션이 들어간게 아닌, ViewWillAppear 때 애니메이션을 실행해줍니다. 동시에 탭바의 스마일 버튼도 같이 웃어줍니다. 시선이 분산되는게 조금 아쉬웠지만, 여러 애니메이션이 있어서 역동적인 느낌을 받았습니다. 또한 강조하고 싶은 메뉴에 빨콩(?) 버튼이 있어서 배너와 빨콩에 손이 먼저 갔습니다. 탭바 메뉴들 검색 검색은 탭바 메뉴에 있는데, 모달로 올라오는게 조금 신기한 느낌이었습니다. 하지만 검색을 하고나면, 네비게이션 푸쉬를 해 주고, 팝을 했을 떄, 메인 페이지로 돌아가는 동선이 낯설었습니다. 뒤로가기를 눌렀는데 내가 온 곳으로 돌아가지 못하기 때문에 그렇게 느꼈나봅니다. 스마일 스마일 클럽을 위한 공 소개입니다. 이 페이지 또한 탭바인데, 모달처럼 오른쪽 위에 닫기 버튼이 있습니다. 누르면 홈 탭으로 돌아갑니다. 마이페이지 마이페이지 탭바의 메뉴중 하나입니다. 하지만 누르면 네비게이션 푸쉬가 됩니다. 뒤로가기를 누르면 이전에 있었던 페이지로 돌아갑니다. 히스토리 매우 인상적인 페이지였습니다. 동작은 마이페이지 처럼 화면전환이 있지만, 그 내용은 사용자의 행동정보가 남아있습니다. 검색기록, 상품조회 등이 타임라인으로 남아있습니다. 내가 아이 쇼핑을 했던 내역을 돌아보며 아까 마음에 들었던 물품으로 돌아가기 좋아보였습니다. 탭바의 이미지가 가장 최근 상품의 썸네일로 변하는 것은 사용자의 호기심을 자극하기 충분해 보였습니다. 하지만 상품의 크기가 다르기 때문에 떄로는 이쁘지만 어쩔때는 이상해 보였습니다. 성능 사용하는데 답답함을 느끼지 못했습니다. 로딩뷰가 있긴 하지만, 기본적으로 로딩이 굉장히 빠르다고 느꼈

이 글은 제목처럼 Optional이란 무엇인가요? 라는 질문에 대답하지 못하는 사람을 위해 쓰였습니다. Swift 문법 책에서 Optional은 써 보았지만, 무엇인지 왜 쓰는지 모르는 사람을 위해 쓰였습니다. 그리고 미래의 저를 위해 쓰였습니다. 옵셔널은 타입 옵셔널을 이해하기 위해서는 타입에 대한 이해가 필요합니다. 스위프트에는 두 종의 타입이 필요합니다. 하나는 이름이 있는 타입(named type)이고, 나머지 하나는 이름이 없는 혼합된 타입(compound Types)입니다. 사용자가 만든 클래스 타입, 배열, 딕셔너리 등은 전부 다 이름이 있는 타입입니다. 또한 데이터의 자료형을 나타내는 숫자, 문자 형들도 다 이름이 있는 타입이죠. 혼합 타입은 이름이 없이 정의된 타입입니다. 예를들면 튜플의 (Int, Double) 로 정의된 타입들이 혼합형 타입입니다. 이름이 없고, 이미 정의된 타입들이 섞여있습니다. 그렇다면 타입의 종류에는 어떤 것들이 있을까요? type → function - type type → array - type type → dictionary- type type → type -identifier type → tuple- type type → optional- type type → implicitly-unwrapped-optional- type type → protocol-composition- type type → opaque- type type → metatype- type type → any- type type → self- type type → ( type ) 타입들을 살펴보다보면, 옵셔녈 타입이 있습니다. 그러므로 옵셔널은 타입중에 하나 입니다. 이름 그대로 이미 정의된 타입에 값이 있을 수도 있고 없을 수도 있는 타입입니다. 옵셔널로 만들어 써보기 옵셔널 타입을 만드는 방법은 간단합니다. 타입의 뒤에 ? 기호를

평소에 가장 많이쓰기도 하고, 잘 만들었다고 생각되는 앱 중 하나인 Toss 를 살펴볼까 합니다. 서비스의 기능을 살펴 본다기 보다는, 앱을 똑같이 구현해야 하는, 그리고 사용자의 입장에서 느낀 점들에 대해서 적어 보겠습니다. 레이아웃 2021년 현재 총 5개의 탭바로 이루어져 있습니다. 첫 탭 페이지는, 가장 필요한 기능인 계좌와 잔액을 보여줍니다. 잔액을 보기위해 매번 로그인을 할 필요가 없습니다. 보통 은행앱의 경우 로그인을 해서 진입하고 진행을 보여주는데, 토스앱을 정확한 동기화는 아닌 금액을 첫 페이지에 바로 보여줍니다. 그리고 상세 계좌로 진입하면, 로그인을 하고, 동기화를 해서 정확한 잔액을 보여줍니다. 어찌보면 조금은 부정확한 데이터 이지만, 게으른 로딩을 해서 매번 로그인을 해야하는 사용자의 귀찮음을 덜어주었습니다. 화면은 테이블 뷰와 섹션으로 이루어져 있습니다. 심플한 구성이, 한 번 구현해 볼만 한 페이지 인 것 같습니다. 나머지 탭은 소비달력, 혜택, 주식, 전체로 각각의 토스라는 앱을 구성하는 큰 기능들이 들어있습니다. 기본 탭바와는 다른 동글동글한 탭바가 매우 마음에 들었습니다. 기본적으로 셀들도 둥근 코너를 가지고 있습니다. 마음에 들었던 UX 화면 오른쪽 상단에 종 모양을 누르면 나에게 오는 알림이 나열됩니다. 이 기능은 일반적이지만, 그 중 하나를 누르면 관련있는 내용들을 묶어서 하나로 만들어 줍니다. 이 기능도 한 번 구현해 보고 싶습니다. 여담이지만 다른 앱들의 알림창보다 토스의 알림창을 훨씬 자주들어가는 느낌입니다. 푸쉬가 로그성이 아닌 정보의 전달이기 때문에 그런걸까요? 로딩뷰가 토스트로 구현되어 있고, 로딩 완료도 토스트로 되어있습니다. 로딩중에 사용자의 행동을 방해하지 않는다는 점이 좋았습니다. 로딩이 되는건가? 라는 생각을 들지 않으면서 로딩중의 사용자를 방해하지 않는 배려가 보였습니다. 전체탭에는 엄청나게 많은 서비스들이 잘 우겨넣어(?) 져 있는 것을 볼 수 있는데 상단의 탭바에 기능들이 나

[UXKit] 앱 탐구 생활 - DarkRoom 2020 Apple Design Awards 를 수상한 앱 중 하나인 DarkRoom(암실) 이라는 앱 입니다. 로고는 산? 모양인데 사진을 편집할 수 있는 앱 입니다. 디자인 상을 받은 앱을 한 번 살펴보겠습니다. Entry point 앱을 실행하자마자 앨범이 나옵니다. 애플의 기본 앨범보다 더 많은 사진을 한 눈에 보여줍니다. 하단에는 요즘 유행하는 모양이 아닌 탭을 볼 수 있습니다. 총 3개의 탭이 있습니다. 상단 네비게이션에는 설정값과 여러 사진에 한 번에 옵션을 적용할 수 있는 일괄적용 버튼이 있습니다. 첫 번째 탭인 최근 항목은 모달로 나만의 정렬된 사진을 볼 수 있습니다. 즐겨찾기, 편집중인 사진, 내가 내보낸 사진, 혹은 태그를 달고있는 사진들 다양한 기준으로 내 사진을 볼 수 있는 것은 굉장히 편리 했습니다. 애플의 기본 사진첩에도 있는 기능이지만 조금 더 쉽게 모아주는 경험을 했습니다. 하지만 선택 후 탭이 바뀌는 기이한? 경험도 할 수 있었습니다. 두 번째 탭인 즐겨찾는 항목과 편집 됨은 첫 번째 탭의 선택사항 중에 포함되어있는 선택지로, 자주 선택되는 선택지인것 같아 보였습니다. 사진 편집 메인 기능인 사진 편집을 살펴보겠습니다. 메인 화면에서 사진을 한 장 클릭하면, 메인 사진이 커지면서 편집할 수 있는 옵션들이 나왔습니다. 자르기, 필터, 채도 및 대비 상세조절, RGB 설정, 스포이드, 여백, 실행 취소 등의 기능이 있습니다. 컨셉 앱의 컨셉이 암실이라, 사용자가 암실에서 사진을 편집해서 하나의 작품을 만들 수 있도록 해주는 앱 이었습니다. 디자인이 어떻게 왜 예쁜지는 잘 모르겠으나, 이 앱을 이용하면 이쁜 사진들을 만들어 낼 수 있을 것 같습니다. 이미지 편집의 기능이 주이며 실제 애플 앨범앱이 디자인 적으로는 더 이쁘다는 생각이 들었습니다.