본문 바로가기

분류 전체보기

 (71)
디자인 시스템 개발 이야기(3) - 함수형 체이닝을 통한 디자인 시스템 나는 디자인 시스템을 설계하면서 init 파라미터 확장, SwiftUI의 modifier 등을 통해 확장등의 방법을 통해 먼저 디자인시스템을 만들어봤을 때의 특징은 다음과 같다.1. init다음과 같이 init 생성자에 파라미터가 길게 늘어져 있는 경우는 사실 디자인시스템의 명확한 기준이 없을 확률이 크다고 생각한다. 이렇게 되어있는 경우 새로운 케이스가 나타날 때마다 자연스럽게 init 생성자에 새로운 파라미터를 추가해 점점 보기 안좋은 코드가 만들어질 것이다. init( title: String? = nil, subtitle: String? = nil, placeholder: String, text: Binding, backgroundCo..
single source 아키텍처로 가는 길(2) - Store 패턴 및 개발 시 고려사항 Store 패턴을 만들게 된 이유를 다시 한 번 상기시키고 넘어가고자 한다.1. Single Source 가 지켜지지 않아, 각 ViewModel가 동일한 데이터를 여러 상태로 중복으로 관리하고 있는 문제가 존재함. 이는 하나의 상태만 바뀐다거나 어느 값이 원천 값인지 구분하기 어렵게 만든다.2. SwiftUI 에서 양방향 데이터 바인딩으로 인해 값이 변화되는 것을 추적하기 어렵다.때문에 현재 구조를 무너뜨리지 않는 선에서 아키텍처를 새롭게 만들고자 하였다. Store 패턴 현재 Store 패턴의 도식화이다. 보면 Flux과 TCA의 모습과 비슷하다.하지만 Flux 패턴은 Store가 여러 개이기 때문에 Store들이 함께 사용되어야 하는 경우 의존성을 관리하는 것에 복잡함이 있다고 느꼈다.또한 TC..
디자인 시스템 개발 이야기(2) - 기존 디자인 시스템(Constructor Hell) 디자인 시스템으로 버튼, 텍스트 필드 등 여러 가지 컴포넌트를 만들었지만 우선 텍스트 필드로 예시를 들어보도록 하겠다. 해당 이미지는 'Gmaket Design system' 이미지다.(설명을 쉽게 하기 위해 사용하도록 하겠다.) 텍스트 필드를 디자인 시스템으로 만들기 위해서는 다음과 같은 규칙들이 필요할 것이다. 색상 - 포커스 on, error, 텍스트 색상, title 색상, sub title 색상...폰트 - 플레이스홀더, 텍스트, 타이틀, 서브 타이틀, error message ...추가로 텍스트 필드 위, 아래의 타이틀, 에러 메세지 여부 등.. 과거 디자인 시스템을 만들고자 할 때 떠올렸던 방법은1. switch 문으로 각각을 케이스로 만들어서 case를 호출하는 방법 2. 생성자에 필요한..
single source 아키텍처로 가는 길(2) - Flux SSOT에 대한 공부를 하면서 single source를 지키기 위한 아키텍처들의 대한 공부를 진행했다. 참고로 react와 js는 공부를 해보지 않았기 때문에 정확히 맞는 코드인지는 모른다. 각 아키텍처가 가진 특징이나 개선 사항을 공부하기 위한 목적이다. fluxflux 패턴은 MVC 패턴의 단점으로부터 출발했다고 한다. MVC 패턴은 간단하지만 치명적인 단점이 있었는데 바로 "양방향 데이터 바인딩" 때문이다. 즉, 데이터가 바뀌면 뷰가 변경되고, 뷰가 변경되면 데이터가 변경되는 구조가 나타나는 것이다. 이렇게 되면 데이트 흐름의 추적이 어렵게 된다. 간단한 앱 규모에서는 찾을 수 있겠지만 어떤 변경이 어디서 발생했는지 추적하기 힘들어지게 된다. SwiftUI에서도 개발을 하다보면 비슷한 상황이..
디자인 시스템 개발 이야기(1) - 아토믹 디자인 디자인 시스템을 만들어 보기 전 디자인 시스템의 원천이라고도 할 수 있는 아토믹 디자인(Atomic Design)에 대해서 먼저 알아보았다. 물론 아토믹 디자인처럼 원자, 분자, 유기체 이렇게 네이밍을 나눠서 진행하진 않았지만 아토믹 디자인의 결합 방식은 디자인 시스템을 구성하는데 좋은 아이디어를 제공한다고 생각이 들었다. https://atomicdesign.bradfrost.com/table-of-contents/ Atomic Design | Atomic Design by Brad FrostLearn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consisten..
single source 아키텍처로 가는 길(1) - SSOT(single source of truth) SSOT란?단일 진실 공급원이라고 부르며 모든 데이터 요소를 한 곳에서만 제어 또는 편집하도록 조직하는 방법론이다. 즉, "진실은 단 하나의 장소에만 있어야 한다" 같은 데이터를 보고 같은 곳에서 관리해야 한다라는 원칙을 말한다. 단어의 원천SSOT라는 용어는 특정 분야에 국한되어 나타난 용어는 아니지만 정보 관리와 데이터 일관성이 필요한 ERP, DB 설계에서 데이터 일관성의 중요성이 대두되며 "하나의 시스템, 소스만이 데이터 원천이 되어야 한다."라는 방법론이 나타났다. iOS 개발에서의 필요성- 상태가 여러 화면과 기능에서 공유된다. 즉, 한 곳에서 관리되지 않으면 데이터 불일치와 UI의 이상이 발생할 수 있다. - 캐시, 네트워크, 로컬 데이터가 동시에 존재한다. 즉, SSOT가 없으면 어떤..
[Swift] 리픽토링_메서드 정리 - 메서드 내용 직접 삽입, 메서드를 메서드 객체로 전환 메서드 내용 직접 삽입이란?메서드 추출과는 반대로 메서드 기능이 너무 단순해서 메서드명만 봐도 너무 뻔할 경우, 그 메서드의 기능을 호출하는 메서드에 넣고 해당 메서드를 제거하는 방식이다. 리펙토링의 핵심은 의도한 기능을 한눈에 파악할 수 있는 직관적인 메서드명 사용과 메서드를 간결하게 만드는 것이다. 하지만 메서드명에 모든 기능이 반영될 정도로 메서드 기능이 지나치게 단순할 때는 나누어진 메서드를 없애는 것이 오히려 효과적일 수도 있다. func getRating() -> Int { return moreThanFiveLateDeliveries() ? 2 : 1 } private func moreThanFiveLateDeliveries() -> Bool { re..
[Swift] CMPedomter 러닝앱 케이던스 만들기 최근 러닝을 취미로 즐기면서 필요한 기능을 더해서 러닝앱을 만들어보고 싶다고 생각했다. 앱에 대한 기능 중 첫 번째로 만들 기능은 케이던스 측정이었다. CMPedometer시스템에서 생성된 실시간 워킹 데이터를 가져오기 위한 객체걸음 수, 이동 거리, 오르내린 층수, 그리고 케이던스와 속도 등을 얻을 수 있다. queryPedometerData(from:to:withHandler:) 메서드를 사용하면 이미 수집된 정보를 가져올 수 있고startUpdates(from:withHandler:)를 사용하면 이벤트 전달을 시작할 수 있다. startUpdates(from:withHandler:)보행자 관련 데이터를 앱에 전달하기 시작하는 메서드사용자가 움직이는 동안, 지정한 startDate부터 지금까지의 ..

티스토리툴바