기획자의 앱 도전기 #6 - 바텀시트 만들기
·
개발/[Flutter]
앱 UI 기획을 하다보면, 자주 쓰게 되는 것이 있는데 바로 바텀시트이다.바텀시트는 아래에서 위로 나오는 패널로, 간단하게 선택하거나, 설명, 요약정보를 보여주는데 많이 사용한다. 바텀 시트를 기획하면서 다양한 모습으로 기획을 했었는데, 디스크립션을 적을 내용들이 생각보다 많았다.그러다 문득, '바텀 시트도 종류가 여러가지인거 아닌가?' 싶어서 찾아보고 직접 만들어보려고 한다. 우리가 사용하는 바텀시트는 크게 세 가지로 나눠서 표현이 되었다.세 가지나 된다니... 개발자들도 과연 다 알까 궁금하다. 모달 바텀시트 (Modal)우리가 앱을 사용하면서 흔히 보는 바텀시트로, 어떠한 행동 시 아래에서 위로 고정된 높이만큼의 패널이 올라온다. 보통 사용자가 간단하게 결할 수 있는 상황에서 많이 사용한다.화면을 ..
기획자의 앱 도전기 #3 - Flutter UI 구조 이해하기
·
개발/[Flutter]
UI를 만들기 전에 구조를 먼저 이해해보자. UI 구조 구성Level 1 : MaterialApp 과 CupertinoApp먼저 어떤 뼈대를 쓸지 골라야 한다.특징MaterialAppCupertinoApp스타일Google의 Material DesignApple의 Cupertino Design기본 테마ThemeDataCupertinoThemeData주요 속성theme : 앱 전체의 색상, 글꼴, 스타일 정의home : 앱 실행 시 첫 번째 화면 설정routes : 화면 전환을 위한 라우팅 테이블 정의navigatorKey : 글로벌 네비게이터 상태 관리debugShowCheckedModeBanner : 디버그 배너 표시 여부 제어theme : 앱 색상, 글꼴, 스타일 정의home : 앱 실행 시 첫 번째 ..
기획자의 앱 도전기 #2 - Flutter 기본 구성 요소
·
개발/[Flutter]
Flutter로 앱을 만들기 전에 기본 구성 요소가 무엇인지 알아보려고 한다. 하지만 나는 전문적인 개발자는 아니기 때문에, 너무 깊게 이해하려고 하진 않을 것이다. Flutter의 핵심 위젯!위젯이란 Flutter를 구성하는 UI의 기본 단위이다. Flutter에서는 모든 것이 위젯이라는 철학을 가지고 있기 때문에 위젯은 기본 구성 요소이면서도, 동시에 가장 중요한 개념이다. (React의 Component와 유사한 개념이다.)위젯의 특징불변성 : 위젯은 생성된 후 변경할 수 없으며, UI를 변경하려면 새로운 위젯을 생성해야 한다.계층 구조 : 위젯은 트리 구조로 구성되며, 부모 위젯은 자식 위젯을 포함할 수 있다.선언적 UI : 현재 애플리케이션 상태에 따라 UI가 어떻게 보여야 하는지 선언적으로 정..
기획자의 앱 도전기 #1 – Flutter 환경 세팅부터 시작!
·
개발/[Flutter]
1️⃣ 시작하며처음에는 개발자가 되고 싶어 공부를 시작했지만, 생각보다 기획이 훨씬 더 재미있게 느껴졌고, 자연스럽게 기획에 깊이 빠져들게 되었다. 그렇게 나는 기획자가 되었다. 하하. ‘멋진 서비스를 만들 수 있겠다’는 기대감으로 일했지만, 현실은 달랐다.개발자와의 갈등, 그것도 단 한 명의 개발자와 부딪히기 시작했다.내가 앱 개발을 몰라서 그런 건지, 회사에 들어온 지 얼마 안 돼서 그런 건지… 잘 모르겠다. 하지만 당시에는 분명히 텃세로 느껴졌다. “그건 안 돼요”, “앱은 그렇게 못 해요”라는 말이 반복되었고, 내가 무리한 요구를 한 것도 아닌데 아무 설명 없이 거절당하는 상황이 너무 답답했다. 그래서 결심했다. 내가 직접 앱 개발을 공부해보자.개발을 몰라서 생긴 오해일 수도 있으니, 기본이라도 ..