Swemo - Iteration 4: MVP 1 구현 (1/3)

#1 개발 목표 (Iteration Goal)

#1-1 이상(Ideal)과 징검다리

이상(Ideal)

내가 직접 쓰고 싶은 앱이 아닌데, 남에게 어떻게 권유할 수 있을까? 앞으로 추가할 기능의 아이디어를 얻기 위해서든, 개발 의욕을 위해서든, 버그 발견을 위해서든 제작자의 실사용은 필수다.

지금까지의 작업 결과물을 토대로, 당장 내가 사용할 수 있는 앱을 만든다. 메모장 대용으로 사용할 수 있기만 하면 그만이므로, 완성도에는 신경 쓰지 않아야 할 것이다. CategoryㆍMemoㆍMemoContent 각각에 대한 CRUD만을 구현한다.

 

Iteration 4: MVP 1 구현 (1/3)

현재까지 구현한 것을 중간 마무리하여 첫 번째 MVP를 만든다. Iteration 4에서는 실제 데이터베이스 추가 및 해당 DB에 메모를 추가하는 기능까지만 구현한다. 이어지는 Iteration 5에서 나머지 기능들까지 구현하고 Iteration 6에서 코드 리팩토링까지 한 후에, 첫 번째 MVP를 마무리하겠다.

 

#1-2 개발 범위

이번 개발 범위 (In Scope)

1. 실제 Database 구현
2. 메모 추가 기능
3. MVP를 위한 UI 업데이트
   1. IME에 반응하는 UI
   2. LabelChipGroup 제거
      • 아이디어 자체를 폐기하는 게 아니라, 당장의 MVP 구현을 위해 제거
      • Iteration 4에서 제거 후 나중에 다시 추가

 

범위 외 (Out of Scope)

1. 메모 삭제 기능
2. 메모 속 MemoContent 개별 삭제 기능
3. 메모 수정 기능
4. 카테고리 추가 기능
5. 카테고리 삭제 기능
6. 카테고리 이름 수정 기능

 

#2 변경 내역 (커밋 목록)

#2-1 Iteration 4-1: IME에 반응하는 UI

실사용을 위해서, 우선 UI가 IME에 반응하지 않는 점을 수정한다.

 

관련 개발 범위

• MVP를 위한 UI 업데이트
  • IME에 반응하는 UI

 

주요 변경점

• App의 Window가 IME에 영향받지 않도록 설정
• MemoEditor가 IME에 맞춰 움직이도록 구현
• Iteration 1-3에서 테스트용으로 뒀던 topBar 속 버튼을 제거하고, 해당 버튼이 지녔던 기능을 MemoEditor 속 "Send" 버튼에 할당

 

스크린샷

 

참고

• [GitHub] 이 작업의 Commit

 

#2-2 Iteration 4-2: LabelChipGroup 등 제거

• LabelChipGroup은 일단 삭제했다. 당장 구현할 MVP에서 보이기에는 완성도가 떨어지고 시간도 없기 때문이다.
  • 하지만, LabelChipGroup은 본 앱의 핵심 UI 요소이기 때문에 나중에 어떤 형태로든 다시 추가될 것이다.
• 이전에 구상했던 설계에 걸맞게, 아이템이 오래된 메모부터 아래쪽에서 올라오게 수정했다.

 

관련 개발 범위

• MVP를 위한 UI 업데이트
  • LabelChipGroup 제거

 

주요 변경점

• MemoFeed의 아이템이 아래에서 위로 올라오는 형태로 변경
• MemoEditor에서 "-" 버튼 제거
• LabelChipGroup 제거
• MemoContentTextField 디자인 살짝 다듬음

 

스크린샷

 

코드 스니펫 - MemoFeed

package com.example.memo.components

...

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MemoFeed(
    memos: List<Memo>,
    modifier: Modifier
) {
    LazyColumn(
        modifier = modifier,
        reverseLayout = true,
    ) {
        items(memos.asReversed()) { memo ->
            Spacer(modifier = Modifier.height(4.dp))
            MemoCard(memo = memo)
        }
    }
}

reverseLayout = true 로 레이아웃 컨테이너를 뒤집고, 그 뒤집힌 컨테이너에 아이템을 역순(asReversed)으로 준다. 이러면 최신 메모일수록 아래에 있고 최초 스크롤바의 위치도 맨 아래에서 시작하는, 이른바 채팅 UI가 된다.

 

참고

• [GitHub] 이 작업의 Commit
• [Tistory] Nutri Capture - 채팅 UI
• [Tistory] Swemo - Iteration 2: UI 디자인 방향 탐색(Exploration)

 

#2-3 Iteration 4-3: MemoContent 추가 버튼 구현

• MVP를 위한 UI 업데이트를 마무리한다
• MemoEditor를 통해 FakeMemoRepository에 메모를 추가하는 기능을 구현했다

 

관련 개발 범위

• MVP를 위한 UI 업데이트
• 메모 추가 기능

 

주요 변경점

• MemoEditor 속에 MemoContent 추가 버튼 구현
• MemoEditor로 메모 입력 → (FakeMemoRepository에) 메모 추가 기능 구현

 

스크린샷

 

참고

• [GitHub] 이 작업의 Commit

 

#2-4 Iteration 4-4: id 프로퍼티의 데이터형 변경

• 내부 데이터베이스를 사용할 예정이므로, id는 서버 환경처럼 String 타입으로 둘 필요가 크지 않다고 판단했다. 오히려 전통적인 방식대로 숫자형 데이터를 사용하는 편이 저장, 조회, 관리 측면에서 더 적절하다고 본다.
• MemoContent는 Memo에 종속된 항목이기 때문에 별도의 id 프로퍼티를 두지 않았다. 그러나 앞으로 다른 Memo로 이동시키는 기능 등이 추가될 가능성이 높다고 판단해, 선제적으로 id 프로퍼티를 추가했다.
  • 식별자가 뒤늦게 필요해지면 데이터 구조 + 사용처 전반을 함께 수정해야 할 수 있어, 여기에서 미리 반영하는 편이 더 안정적이라고 판단했다.

 

관련 개발 범위

• 실제 Database 구현

 

주요 변경점

• Model 클래스들의 String 형 "id" 프로퍼티의 데이터형을 Long 형으로 변경
• MemoContent에 (Long 형) "id" 프로퍼티 추가

 

참고

• [GitHub] 이 작업의 Commit
• [Tistory] SOLID 원칙

 

#2-5 Iteration 4-5: database 모듈 구현

database 모듈을 선언 후 간단하고 정석적인 데이터베이스를 구현했다

 

관련 개발 범위

• 실제 Database 구현

 

주요 변경점

• database 모듈 추가 및 기본적인 데이터베이스 구현
• .gitignore 업데이트

 

참고

• [GitHub] 이 작업의 Commit
• [GitHub] nowinandroid 의 database 모듈

 

#2-6 Iteration 4-6: 내부 데이터베이스와 연동

Iteration 4-5에서 만든 데이터베이스를 사용한다.

 

관련 개발 범위

• 메모 추가 기능

 

주요 변경점

• FakeMemoRepository → FakeMemoRepositoryImpl로 이름 변경
• database 모듈을 의존하는 MemoRepositoryImpl 구현
• MemoViewModel에 FakeMemoRepositoryImpl 대신 MemoRepositoryImpl 주입

 

스크린샷

 

참고

• [GitHub] 이 작업의 Commit