1. Flutter 복습
상태관리패키지 GetX 사용법
GetX : 강력하고 가벼운 상태관리 솔루션, 간결한 코드, 빠른 성능, Context 불필요, 메모리 효율 좋음
GetX의 3대 기능
상태관리, 의존성관리(Get.put(), Get.find<>();), 라우트관리(페이지 관리)
// 1. 상태 관리 (State Management)
class CounterController extends GetxController {
var count = 0.obs;
void increment() => count++;
}
// UI에서 사용
Obx(() => Text('${controller.count}'))
// 2. 의존성 관리 (Dependency Management)
final counterController = Get.put(CounterController());
//처음 가져올 때 Get.put() 사용해서 가져옴
final counterController = Get.find<CounterController>();
//Get.put()을 처음 한 이후에는 Get.find() 사용해서 가져옴
// 3. 라우트 관리 (Route Management)
Get.to(() => NextScreen());
// 오른쪽 코드 대신 사용 가능 -> Navigator.push(context, MaterialPageRoute(builder: (context)=>NextScreen()));
Get.back();
// Navigator.pop() 대신 사용 가능
1) 상태관리 (State Management)
class CounterController extends GetxController {
// .obs를 붙이면 반응형 변수가 됨
var count = 0.obs;
void increment() => count++; // 자동으로 UI 업데이트!
}
// UI에서 사용
Obx(() => Text('${controller.count}'))
.obs 관찰가능한 변수로 만들기 GetXcontroller에서 사용
Obx. 변수 변화를 감지하고 자동으로 UI업데이트 (UI에서 사용)
GetxController 상태와 로직을 담는 컨트롤러 (ViewModel 역할)
2) 의존성관리 (Dependenct Management)
컨트롤러를 어디서든 쉽게 사용
// 의존성 주입 (Dependency Injection)// 컨트롤러를 GetX 시스템에 등록
final controller = Get.put(CounterController());
// 다른 화면에서 같은 컨트롤러 가져오기*
final controller = Get.find<CounterController>();
//실전 예시:
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
Car bmw = Car(name: 'bmw');
Car bentz = Car(name: 'bentz');
// 첫 화면에서 컨트롤러 생성 및 등록*
final CoutnerController controller = Get.put(CounterController());
return Scaffold(
body: Obx(() => Text('Count: ${controller.count}')),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 다른 화면에서 동일한 컨트롤러 사용*
final controller = Get.find<CounterController>();
return Scaffold(
body: Obx(() => Text('Same Count: ${controller.count}')),
);
}
}
여러 화면에서 같은 상태 공유가능, 수동으로 전달할 필요 없음, 자동 메모리 관리(화면 종료 시 자동삭제)
3) 라우트 관리 (Route Management)
// ❌ 기존 방식 - 길고 복잡함
Navigator.push(
context, // context 필요!
MaterialPageRoute(builder: (context) => NextScreen()),
);
Navigator.pop(context);
// ✅ GetX 방식 - 간단명료!
Get.to(() => NextScreen()); // context 불필요!
//Get.to(NextScreen()); 도 가능
Get.back();
// 추가 기능들
Get.toNamed('/next'); // 이름으로 이동
Get.off(() => NextScreen()); // 현재 화면 대체
Get.offAll(() => HomeScreen()); // 모든 화면 (스택) 제거하고 이동
Get.snackbar('제목', '내용'); // 스낵바 표시
Get.dialog(AlertDialog(...)); // 다이얼로그 표시
context 전달 불필요, 코드가 훨씬 간결, 다이얼로그/스낵바도 쉽게 사용
2. 인사이트클럽
좋은 UX디자인의 정의는? (박종민 디자이너)
https://www.youtube.com/watch?v=JTSpf07vwZE
오늘의 핵심 인사이트
UX의 본질은 목표에 도달하기까지, 경험의 시작과 끝, 감정과 느낌의 총합, 그 만족도를 말한다.
기술은 발전하지만 사람과 사람의 욕망은 크게 변하지 않는다. 변하지 않는 것에 계속 집중해야 한다.
알고리즘이 대처할 수 없는 영역이라면, 사람의 진심어린 마음을 기반으로 한 관계이지 않을까.
내가 창업을 한다면 적용할 부분
1) UX로 가장 차별화되는 부분이라면
‘마음’을 기반으로 한 관계가 얼마나 탄탄하고 진정성있는지로 나눠질 것이라는 생각이 들었다.
그렇다면, 우리의 서비스는 고객과 어떠한 관계를 맺어갈 것인가,
그 부분을 고민해서 적용해봐야 겠다.
2) 사람과 사람의 욕망에 집중하고 파고들어야 한다.
우리의 고객의 목표는 무엇이고, 그것을 왜 달성하길 원하는지를 우리가 먼저 인지해야 할 것 이다.
그래야 목표달성에 도움을 줄 수 있을 것이므로.
+ 댓글 질의응답
Q. 사람의 욕망에 집중해 보겠습니다. 영상내내 저에게 도움되는 얘기 뿐 인 것 같아 몇번 돌려봤는데, 박종민 디자이너님께서는 경험에 대한 이용자들의 만족도가 어떤가에 대한 수치나 정보는 어떻게 수집하시는지 궁금합니다.
A. 정성적으로는 VOC, 사용성 평가, 인터뷰 등을 통해 문제를 해결하는 과정에서 발생하는 잡음이 얼마나 줄었는지로 확인합니다. 좋은 경험에 대해 물어보면 당연히 '좋다' 정도의 정보만 수집되서 전체 경험에서 얼마나 잡음이 적은지를 만족으로 보는 것 같아요. 정량적으로는 사용자 만족도를 설문조사하는 NPS 방식이나 해당 행동을 얼마나 반복하는지를 확인하거나 서비스 전체의 리텐션으로 확인합니다.
NPS란?
NPS란 Net Promoter Score의 약자로, 브랜드에 대한 고객 충성도를 측정하는 지표.
2003년 Bain & Company의 Fred Reichheld가 창시하여 HBR(Harvard Business Review)에 The One Number You Need to Grow(성장에 필요한 단 하나의 숫자) 라는 글로 NPS를 처음 소개하였고, 현재는 수백만 기업에서 고객 만족도를 측정하기 위해 사용.
NPS는 “우리 서비스를 주변에 얼마나 추천하고 싶으신가요?”라는 간단한 문항 하나로, 고객의 만족도, 브랜드 충성도, 그리고 추천 의향까지 분석할 수 있어요. 복잡한 문항을 설계할 필요 없이 간단하게 조사가 가능하기 때문에 응답자 부담도 적답니다. 나아가 기존 결과와 비교 분석하기에도 좋으며, 경쟁사 NPS 지표와도 직접 비교할 수 있기 때문에 업계에서 우리 브랜드의 고객 충성도를 객관적으로 분석할 수 있어요.
댓글
댓글 쓰기