Flutter

오늘은 플러터에서 디자인 시스템을 효율적으로 관리하는 방법을 소개하려고 합니다. 특히 프로젝트 내에서 범용적으로 사용되는 TextStyle과 Color에 초점을 맞추어 글을 작성하겠습니다. 디자인 시스템이란? 디자인 시스템은 프로덕트 개발의 일관성, 효율성, 확장성을 보장하기 위해 필요한 시각적 요소(스타일, 구성 요소, 패턴, 가이드라인) 등을 정의한 것입니다. 디자인 시스템을 정의하는 법은 따로 정해져 있지 않기에 좌측처럼 디자이너가 직접 작성하여 공유하는 경우도 있으며, 우측과 같이 디자인 툴() 내부 기능을 통하여 정의하기도 합니다. 디자인 시스템에서 정의된 Text(세부 속성 및 명칭 포함) Figma 내부에서 정의된 색상 모음 이렇듯 자주 사용하는 TextStyle, Color 등을 프로젝트 ..

오늘은 플러터에 하단 sticky UI 패턴을 접목시킨 스크린 템플릿을 소개하려고 합니다. 최근 기업의 채용 공고 페이지 및 쇼핑 플랫폼에서 주요 기능에 대한 접근성을 높이기 위하여 이러한 UI 패턴을 활용하는 추세입니다. 1. Sticky UI란? sticky UI는 화면에 배치된 UI 요소가 스크롤에 영향을 받지 않고 사용자 시야에 고정되어 있는 디자인 패턴을 말합니다. 이를 통하여 사용자는 어떠한 상황에서도 주요 기능에 쉽게 접근할 수 있는 장점이 있습니다. 채용 공고 사이트의 '지원하기' 버튼 쇼핑몰의 '찜하기', '장바구니 미리담기', '재입고 알림신청' 버튼 이러한 sticky UI는 작은 화면 크기로 인하여 잦은 스크롤이 발생하는 모바일 환경에 주로 사용됩니다. 채용 공고 사이트에서의 '지원..

Problem (문제 상황) 서비스 출시를 앞둔 링링 서비스를 팀원들과 함께 테스트하던 도중, 미처 발견하지 못한 문제를 팀원 한 명이 말해주었다. 문제는 아이폰 사용자들에게는 익숙할 수 있는 Swipe Back Gesture를 통한 뒤로 가기 기능에서 발생하였다. 평소, 안드로이드를 사용하는 나에게는 에뮬레이터를 통한 테스트에서도 너무 당연하게 Swipe Back 제스쳐를 테스트 해보지 않았고 관련된 기능을 추가한 적이 없어서 코드 상에서 별도로 처리해두지 않았다. 그렇지만 Flutter 자체의 위젯이나 기능들이 높은 사용자 경험을 제공하는데, 이 Swipe Back Gesture 역시 기본적으로 내장되어 있었다. 위는 문제 상황에 대한 스크린샷으로 Swipe Back을 통하여 로그인 화면으로 돌아가는..

필자를 비롯한 Flutter를 통한 Cross-Platform 개발을 시작하려는 사람들의 경우, Dart 언어도 함께 들어보았을 것이다. 몇몇의 경우, Dart와 Flutter의 출시 시기가 비슷하다고 생각하고 또 그렇게 알고 있는데 실제로 Flutter는 2018년, Dart는 2011년에 처음으로 세상 바깥으로 나오게 되었다. 그렇다면 이미 많은 프로그래밍 언어들이 있었고, 큰 주목을 받지 못했던 Dart를 어째서 Flutter의 언어로 채택하였을까? 프로그래밍 언어 Dart의 특징, 채택될 수 있었던 이유에 대하여 알아보도록 하자! Dart? Dart는 객체 지향 언어이며, Google에서 개발한 프로그래밍 언어이다. "JavaScript를 대체 가능한 Cross-Platform 프로그래밍 언어"를..