251229 월요일 TIL
상품을 거래하는 어플을 구현하는 팀 프로젝트를 진행중
과제의 포인트는 기능구현이 우선이고, 간단한 컨셉정도만 잡아서 애플 제품들을 중고거래하는 앱을 제작하기로 했다.
오늘의 작업
⭐️ HomePage UI구현
오늘의 목표
: HomePage에 들어가야 할 UI 배치하기
작업 내용
: AppBar의 중앙에 logo를 넣고, 우측에는 써치 아이콘과 카트 아이콘을 배치하였다.
구현한 부분
1. 등록 된 제품이 없는 빈 페이지일 경우엔 화면 중앙에 로고만 보일 것
2. 제품 판매 리스트를 만들어서 배치하고 스크롤이 가능할 것
-각 리스트에는 이미지, 타이틀, 가격이 들어가야 한다.
3. 하단에 플로팅액션버튼을 배치
디테일
텍스트, 버튼, 테마는 다른 팀원이 만들어 둔 공통 지정 테마를 이용해서 적용
❗️ 과제를 진행하면서 어려웠던 점
1. git을 이용하는 방법이 여전히 헷갈려서 주요한 부분을 간단히 기억했다!
함께 작업하는 페이지와 위젯들을 하나의 브랜치로 모아서 합치고, 오류를 수정하고, 최종적으로 main 브랜치로 합쳐서 완료하는 중요한 과정이다.
🔽 깃 레포지토리 연결방법
파일을 연동할 때 Flutter 터미널에서 해당 명령어를 입력한다.
ls -al
cd apple_market
git pull
🔽 깃 새로운 브랜치 만들어서 내 페이지 올리는 법
- 터미널에서 git fetch를 입력 한 뒤
- 좌측 하단의 Dev(저장하는 곳) 눌러준 뒤 Flutter에서 create new branch를 선택한다.
- 소문자로 feat/ex-page-ui 깃 파일 생성해주기
2. 코드를 짜면서 주요하게 기억할 부분들을 간단히 정리했다.
😂
시뮬레이터가 켜져 있을 때 이미지 에셋을 추가하면 적용이 되지 않는다.
동작을 시작하는 시점 이후에 추가된 것들은 시뮬레이터를 다시 시작해야만 적용이 된다..
코드의 잘못이 아닌데 이런 부분들에서 헤매다가 시간낭비가 다소 되었다.
🧡 정규식 알아보기!
숫자의 소수점 없애기, 정규식으로 단위마다 ','를 추가하는 방법
// 상품 리스트
// 가격 소수점 없애고'toInt', 문자열로 변환'toString', 정규식으로 1000단위마다 콤마 추가하기
String formatPrice(double price) {
return price.toInt().toString().replaceAllMapped(
RegExp(r'(\d{1,3}(?={\d{3})+(?!\d))'),
(Match m) => '${m[1]},',
);
}🌱 피그마 이해하기
주말 쉬는날에 과제에도 도움이 되지 않을까 싶어서 피그마로 UI디자인을 하는 일에 흥미가 생겨서 첫 피그마 연습을 해보았다.
실제 실무에서 받는 디자이너 시안은 어떨지, 직접 디자인을 해보고도 싶어서 어설프지만 만들어보았다.
탄탄하게 구조를 먼저 쌓고 디자인을 들어갔어야 했는데 이런저런 요소들을 추가하다 보니 재미를 느꼈고, 많은 것을 시도해 본 것에 의의를 두고 있다.
매칭레이어를 사용하면 동시에 수정이 가능하다. 상단 네모 아이콘
클리핑마스크 이미지를 상단에, 도형을 아래에 놓고 클리핑마스크 아이콘
오토레이아웃 기능으로 프레임 안의 두 가지 객체 사이에 마진값을 줄 수 있음. 마진값은 변하지 않음
그룹으로 만들어서 오토레이아웃을 써도 되지만 백그라운드 까지 전체적으로 값을 적용하려면 드래그해서 순차적으로 적용할 오토레이아웃을 걸어주면 된다.
중간의 객체를 삭제하면 백그라운드가 면적에 맞춰 줄어든다.
효율적인 디자인이 가능
속성 등록하기
속성을 등록해서 쓰면 편리하고, 공통적인 디자인을 적용 가능하다.
👍 피그마 연습하기
구현해 본 기능
[ 반응형 디자인 ]
AutoLayout + clip하면 이미지를 클리핑마스크 처럼 필요한 영역만큼 조절해서 사용할 수 있다.
Frame hug(변동됨) / fix(고정) 설정을 사용해서 프레임이 내부 객체에 맞춰 확장이 될지 안될지 조절할 수 있다.
내부 객체를 fill 속성을 적용 시켜주면 외부 프레임에 따라 반응을 한다.
constraints
위 아래 좌 우 고정 시킬 수 있음
안의 텍스트에 left and right를 걸어주고 프레임을 줄여주면 텍스트가 ... 표시가 되며 줄어든다.
텍스트는 설정에서 말줄임을 선택하면 적용이 된다.
오토레이아웃 적용 후
전체적으로 개체들을 frame -fill로 바꿔줘야 유동적으로 반응을 한다.
rayout grid
웹의 경우엔 보통 그리드 12줄로 설정.
앱의 경우엔 6줄 그리드를 넣고 좌 우에 마진값을 12~20정도 적용 한 후 그리드 가이드라인을 따라 디자인을 하면 비율 등 계산을 하는데 많은 도움이 된다.
🌿 [ 스타일가이드 ]
스타일 등록하기 각 그룹에 맞춰 묶어두면 된다.
컬러 지정
1. Colors
Brand colors
State colors
Bg colors
Line colors
Front colors
폰트 지정
한글(Noto Sans), 영문 프리펜다드 폰트도 별도
2. Typograpy
- Font size
- Line Height
Heading
Title
Body
🍊 [ 컴포넌트 ]
AutoLayout + fill 반응형 레이아웃 적용시켜놓기
1. Assts에 컴포넌트 추가하기
객체들 선택 후 (다이아4개아이콘)눌러서 Create component set 적용시키기- 속성별로 하나하나 쓸 수 있음
버튼의 속성을 적용시켜서 사용할 수 있다.
2. Icon 별 사이즈 속성 적용시키기
Properties에서 '사이즈'=title 라고 이름 붙여주기
큰 사이즈 Icon들만 골라서 '사이즈' Current variant'56' 값 적용시키기
다음 사이즈도 적용시켜주면 된다. 중간 사이즈 '44' 작은 사이즈 '24'
속성들 적용해서 저장
3. Icon 별 스타일 속성 적용시키기
각 사이즈 별 속성이 적용된 Icon들을 같은 디자인 카테고리로 묶어서 다시 속성값에 이름을 붙여준다.'기본', '비활성화', '로딩'
4. Icon 안의 레이어 개체 별 속성 적용
Layer 옆의 네모난 버튼 클릭-Create component property-Name 적용
Icon버튼 내 들어간 개체들을 추가된 형태, 없는 형태를 토글로 변경 가능
❤️ [ 배운점 ]
피그마
'스타일 가이드'의 중요성. 다른 구성에 가져갔을 때도 적절하게 적용이 가능한 디자인을 해야한다.
appBar 등 요소들의 레이아웃이 코드를 구성하듯 어떻게 짜여졌을까,
재사용성이 높게 컴포넌트를 어떻게 만들까 고민하면서 많이 배웠다.
과제
제한시간 내 기능을 정확히 구현하고 완수하는데 초점을 맞추고, 팀원에게 같은 내용을 매번 물어보지 않게 팀 작업 가이드라인을 완벽하게 숙지하고 진행해야겠다.
현재 진행 과정을 보면 시간 내 과제 완수는 가능할 것 같지만 그 외에 S.A작성, 자료정리, 발표 등 준비할 것이 정말 많다!!
기능 구현을 위한 지식이 많이 부족한데 모르는 것은 바로 물어보고, 복습을 병행하며 기초를 탄탄히 계속 다져가는 시간을 가져야겠다.
