V0로 만든디자인을 안드로이드 스튜디오(Java)로 옮기기

V0로 만든 디자인을 안드로이드 스튜디오(Java)로 옮기는 과정
=> 그림을 보고 설계도를 다시 그리는 것

즉, 해야할일 = 디자인의 수치(색상, 간격, 폰트)를 참고해 안드로이드용 XML로 번역하기

1단계: 안드로이드 스튜디오 프로젝트 설정

V0의 UI를 구현하기 위해 프로젝트를 먼저 생성

1. New Project → Empty Views Activity를 선택하세요.
   주의: 그냥 Empty Activity는 최신 Compose 방식이라 Java와 맞지 않고 언어선택도 안됌
   (compose는 코틀린에서만 사용) 반드시 Views가 붙은 것을 골라야 XML과 Java를 사용하기_
2. Language를 Java로 설정
3. Build Configuration Language는 Groovy DSL로 선택 (예제가 많음!!)

---

2단계: 디자인 에셋(색상, 폰트) 옮기기

V0에서 사용한 색상값과 폰트를 안드로이드에 미리 등록하기

• 색상 등록: res/values/colors.xml 파일을 열고 기획하신 색상을 추가

<resources>
    <color name="primary">#1E3A8A</color>
    <color name="secondary">#64748B</color>
    <color name="background">#F8FAFC</color>
    <color name="status_stored">#16A34A</color>
    </resources>

• 폰트 적용: 1. res 폴더 우클릭 → New → Android Resource Directory → Resource type을 font로 선택

2. 다운로드한 Noto Sans KR 파일(.ttf)을 res/font 폴더에 넣기 (파일명은 소문자와 언더바만 가능: noto_sans_kr.ttf).

• 테마 설정: res/values/themes.xml에서 android:fontFamily를 지정하면 앱 전체에 적용됌

---

3단계: 화면 구조 잡기 (탭 구성)

'리턴즈' 앱은 하단 탭이 4개이므로 BottomNavigationView를 사용해야 합니다.

1. Layout 만들기: res/layout/activity_main.xml에서 화면 하단에 하단 바를 배치합니다.
2. Menu 만들기: res/menu 폴더를 만들고 4개의 탭(홈, 갤러리, 습득등록, 분실등록) 아이콘과 이름을 정의합니다.
3. Fragment: 각 탭을 클릭했을 때 바뀔 화면 4개를 생성합니다. (우클릭 → New → Fragment → Fragment (Blank))

• HomeFragment, GalleryFragment, FoundRegFragment, LostRegFragment

---

4단계: XML로 UI 번역하기 (V0 코드 보고 그리기)

V0에서 본 디자인 요소들을 안드로이드 뷰로 바꾸기

V0 (웹 요소)	안드로이드 (XML 요소)	설명
<div> (박스)	LinearLayout 또는 ConstraintLayout	요소를 담는 그릇
<h1>, <p>	TextView	글자 표시
<input>	EditText	입력창
<img>	ImageView	사진
List, Flex	RecyclerView	목록 구현
Button	Button 또는 MaterialButton	클릭 버튼

예시: 탭 1의 검색창 만들기

<EditText
    android:id="@+id/search_bar"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:hint="제목 또는 장소 검색"
    android:background="@drawable/bg_search_rounded" 
    android:padding="12dp" />

(둥근 모서리는 res/drawable에 XML 파일을 따로 만들어 적용...가장 하단 참조)

---

5단계: Java 코드로 기능 연결하기

이제 화면(XML)과 로직(Java)을 연결해야함

1. View 연결: findViewById()를 사용하여 Java 코드에서 XML 부품을 불러오기

TextView titleText = findViewById(R.id.item_title);
titleText.setText("파란 우산 습득");

2. 데이터 리스트: 탭 1의 목록을 보여주기 위해 Adapter가 필요
   데이터(리스트) -> 어댑터 -> RecyclerView 순서로 연결

3. 탭 전환 로직: BottomNavigationView의 아이템 클릭 리스너를 만들어 클릭 시 프래그먼트를 교체(FragmentTransaction)하게 함

---

가장 오류 많이 나는 부분

1. 둥근 모서리와 테두리: V0(Tailwind)의 rounded-lg 같은 효과는 안드로이드에서 res/drawable에 shape XML 파일을 만들어야함 (귀찮기도하고 약간 복잡?)
2. RecyclerView: 리스트 구현이 처음엔 꽤 복잡
   (Item XML, ViewHolder, Adapter 3종 세트가 필요함,, but 한 번 배우면 계속 씀/시작만 어렵다~)
3. ViewBinding: findViewById를 수백 번 쓰는 대신 ViewBinding이라는 기술을 사용하면 코드가 훨씬 깨끗해짐

---