[Toy] Pixel Palette v2.0.0 업데이트 회고

첫 배포를 마치고 얼마 지나지 않아 v1.1.0를 제출했다.

v1.1.0 에서는 다국어 지원(영어, 한글)을 했고 iOS 오픈카톡방에서 선배 개발자 분들이 얘기 해주신 점들을 모두 반영했다. 가령 pan gesture로만 picker view를 움직이는게 아니라 tap gesture도 적용해서 더 편하게 움직일 수 있도록 했고, 첫 화면에서 사용한 아이콘이(+ 모양이었음) 어떤 action을 trigger하는 것 같이 느꼈다는 피드백에 아이콘 교체로 사용자 경험을 향상시켰다. 내가 기획, 디자인, 개발까지 다 직접 한 작업물이라 비록 단순해 보일지라도 소중했다. v1.1.0을 내보내고 나서도 뿌듯했다.

그러나

평점이 1점이라니. 굳이 평점을 남기기위해 앱 스토에서 별 하나를 눌렀다니. 어지간히 마음에 안 든 부분이 많으셨던 것 같다. 사실 저 별 한개가 너무 충격적이라 처음에는 "뭐지? 전남친인가?" 라고 생각할 정도였으니 보통 멘붕이 아니었다. 그제서야 내 앱을 객관적으로 바라보아야겠다고 생각했다. 디자인이 구리다(?)고 평점을 낮게 주지는 않을 것 같으니 현재 working function에 불만이 있거나 당연히 지원해야 하는 것이 지원이 안되었을 것이다.

뭐가 안되는거지?

앱의 이름이 Pixel Palette인 이유는 사진 속 한 점의 색을 뽑아내어 소중한 순간을 모아보라는 뜻에서 지었다. 그리고 앱에서는 충분히 이미지의 한 점을 잘 뽑아내고 있었다. 지원하는 제일 중요한 기능이 색 추출인데 뭐가 문제라는거지? 문제 파악이 잘 안 되어 'color picker', 'pixel color' 등의 키워드로 App Store에 검색해서 상위에 있는 앱들을 한 대여섯개 다운 받아보았다. 대표적으로 Colorvalue와 Color Collect 라는 앱이 있는데 이 두 앱 덕분에 더 좋은 방향으로 앱을 발전시킬 수 있었다. 두 앱의 특징을 아래와 같이 정리해보았다.

 

(좌) Colorvalue (우) Color Collect

	Colorvalue	Color Collect
특징	사진을 움직여 가운데 점의 색을 추출	정말 다양하고 많은 기능을 지원
	바로바로 색상값을 다양하게 표현	picker를 움직일 떄 사진을 일부 확대
단점	정밀한 색 추출은 힘듬	picker 바로 위에 손을 올려야만 움직임

내 앱은 단점 못 뽑아내면서 다른 앱 단점은 눈에 뭐가 이리도 잘 보이는지 내로남불도 이런 내로남불이 없다ㅎㅎ 위 표에서 볼드 처리한 부분에 집중해 다음 업데이트를 해보기로 결심했다. 

1. 다양한 색상값 미리 표현

2. 정밀한 색 추출을 위해 사진 학대 지원

v2.0.0 완성 얍! 그러나 아쉬움을 많이 곁들인...

짜잔

하단에 hex 값과 rgb 값으로 색 표현이 바로되기 때문에 저장하지 않아도 색의 값을 알 수 있다. 뿐만 아니라 Color Collect에서 아쉬웠던 부분을 보완해서 touch 영역을 가로세로 50씩 늘려 조금 옆을 눌러도 picker view를 움직일 수 있게 만들고 더 정밀한 색상 표현을 위해 확대 이미지도 지원한다. 확실히 예전보다 더 쓸만한 앱이 되었다고 느껴지는데 사용자도 그렇게 느꼈으면 좋겠다...ㅎㅎ

 

이번 개발이 쉽지만은 않았다. MVC를 채택하고 delegation pattern을 통해 데이터를 주고 받았는데 이참에 MVVM으로 바꿔볼까 결심해서 Refactor branch를 따서 작업을 해보았다. 사용자의 입력(picker의 location 변화)에 따라 다양한 변경사항들이 적용되지만 생각보다 공통된 점은 없었다. 그래서 오히려 불필요한 작업을 한다고 느껴 지우게 되었다. 물론 MVVM의 본 의미는 view와 view controller가 가지는 끈끈한 관계를 끊어내면서 view의 업데이트 판단을 view model에게 넘기는 일이지만 아직 개발 경험이 짧아서 그런지 직접적으로 RxSwift나 Combine을 적용하지 않으면 잘 못하겠더라.

 

또 다른 아쉬운 점은 원래 바란 방향대로 개발아 안돼서 중간에 계획을 수정한 점이다. 위의 완성 된 스크린샷을 보면 picker view의 border color가 움직일 때 바뀌는 것을 알 수 있다. 원래 처음 계획 때는 picker의 background color를 계속 변경하는 것을 목표로 했다. 하지만 pickerView.backgroundColor = color 를 지정하는 순간 모든게 올스탑이 되더라. picker의 위치를 움직이더라도 position 정보가 넘어오지 않았고 더 이상 어떤 업데이트도 진행되지 않았다. background color를 바꾸는게 그렇게 어려운일인가 싶었다. 직전 버전에서 버튼의  background color는 잘만 바뀌었는데 잘 이해가 되지 않았다. 그래서 혹시 update cycle에 관여를 하면 되지 않을까라는 생각이 들어 setNeedsDisplay를 적용해보았지만 안되는 것은 매한가지...

@objc func panColorPicker(_ sender: UIPanGestureRecognizer) {
   delegate?.didMoveImagePicker(self, didMoveImagePicker: CGPoint(x: center.x, y: center.y))
   borderView.backgroundColor = color
   borderView.setNeedsDisplay()
}

Stackoverflow에 질문을 해보았는데 돌아오는 것은 같은 대답이었다. setNeedsDisplay를 사용해보라는. 그 와중에 배운 것이 있다면 UIView의 content는 Layer에 캐시된다는 점. 그래서 background color를 바꾼다면 redraw 요청을 해줘야 한다는 점. "그럴 것 같아서" setNeedsDisplay를 사용했던 것에서 왜 해야하는지 이유를 알고 하는 것은 다르니까ㅎㅎ 어쩌면 사소한 부분을 발견하지 못하고 놓치고 있어서 구현을 못해낸 것일수도 있지만 많이 아쉬운 부분이다.