안녕하시렵니까..😄
velog 첫 게시글의 내용을 고민하다가 일단 글이라도 써보자해서 쓰는 UI 뜯어보기
시작하겠습니다.~
1. 레퍼런스 준비
일단 figma에서 새 파일을 만들고, frame은 제가 현재 사용중인 폰과 규격이 맞는 프레임을 불러올게요
(왜냐하면 제 폰으로 홈화면을 캡처했기 때문입니다.)
프레임 안에 캡처한 이미지를 넣어주면
위와 같이 카드뷰의 규격을 딸 레퍼런스가 완성 됩니다 ㅎ
<컬리앱 전부를 클론 코딩할 시간은 없어서 카드뷰만 뜯어보도록 하겠습니다.>
2. 레이아웃 분해
위와 같은 식으로 레이아웃을 크게 세 부분으로 나눌 수 있습니다. (이미지 - 카트 - 가격 및 정보)
레이아웃 딸 때는 보통 채도가 높은 색의 opacity를 줄여서 레이아웃을 따면 더 수월합니다
##3. 사용할 데이터 명세
하나의 카드뷰에서 필요한 데이터 클래스를 미리 표시해줍니다.
<data class>
이미지 -> img
담기 버튼 ->그냥 frame레이아웃으로 구성 -> cart
품목이름 -> title
할인 전 금액 -> original_price
할인율 -> discount_rate
가격 -> price아래 이미지와 같은 식으로 xml의 id를 네이밍 해줄거예요.
font는 정확히 뭔지 모르겠어서 가장 비슷한 'inter'로 하도록 합니다. !
figma의 스포이드로 자주 쓰일 것 같은 색들을 미리 따줍니다.
- 데이터 클래스 정의하기 위한 네이밍
- 반복적으로 사용하는 색상 -> 팔레트 만들기
- 카드뷰 horizontal 방향으로 스크롤 됨 (카드뷰간 spacing은 8dp임)
Q)여기서 알 수 있는 건 카드뷰 리소스를 만들 때, margin값을 얼마를 줘야할까요?
A) 정답은 4dp입니다~~
리소스로 등록해둔 뷰가 수평 방향으로 반복적 사용되기 때문입니다.
4. res > values > colors.xml 에 색상 리소스 추가 (feat. GPT)
타이핑하기 매우 귀찮으므로, chatgpt에 팔레트 이미지와 프롬프트를 입력하고, 그걸 복사해서 colors.xml에 리소스로 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 원래 있던 색상 -->
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<!-- 카드뷰에서 사용할 색상 -->
<color name="black_replacement_color">#2A2A2A</color>
<color name="cart_stroke_color">#E2E7EB</color>
<color name="original_color">#C0C9D2</color>
<color name="discount_rate_color">#FE5307</color>
</resources>일단, recyclerview를 만들기 위한 밑작업은 끝났습니다.
일단 하긴 합니다.