[TIL][내일배움캠프]

[내일배움캠프][TIL] 24.01.12 (금) - Clone UI

kimlaurant 2024. 1. 12. 21:13
1. Clone UI

 

다음주에는 팀 프로젝트가 예정되어 있다.

저번 팀 프로젝트에서 느껴본 바, 팀 프로젝트 기간에는 개인적으로 뭘 할 수 있는 시간이 상당히 줄어든다.

 

즉, 이렇게 과제를 끝내고 시간이 남는 오늘이 개인적으로 학습할 수 있는 몇 안 되는 기회라는 뜻.

 

그리하여 오늘은 그동안 시간이 부족해서 하지 못했던 Clone UI를 만들어볼까 한다.

 

 

Clone UI란?

 

말 그대로 UI를 복제(Clone)한다는 뜻으로, 구체적으로는 시중에 나와있는 유명한 앱을 본인이 직접 따라해서 구현해보는 행위다.

 

 

Clone UI를 하는 목적

 

그러면 Clone UI는 왜 만드는 걸까?

 

당연한 이야기지만, '돈을 벌기 위한' 목적은 아니다. (이러면 잡혀간다.)

Clone UI를 만드는 목적은 여러가지가 있지만, 내가 생각하는 가장 큰 목적은 바로 이것이다.

 

이 앱들은 어떻게 구현했고, 어떻게 해야 유저들이 원하는 앱을 만들 수 있는가? 를 알아보기 위해서.

 

사람들에게 널리 이용되는 앱들은 소비자의 니즈에 부합해서 그러는 것이 가장 크지만, 거기에는 어떤 식으로 UI가 구성되어 있는가도 그에 못지 않게 중요하다. 아무리 소비자들의 니즈에 부합하는 앱이라고 해도 직관성이 떨어지면 금세 질릴 가능성이 높기 때문.

 

그리고 기껏 그걸 알아도 어떻게 구현하는지를 모르면 추후에 내가 무언가를 만들고자 할 때에 크게 어려움을 겪는다.

 

그래서 미리 이런 기능은 어떻게 해야 구현할 수 있는지 알기 위해서 Clone UI를 만든다.

 

 

Clone UI 제작

 

오늘 시간이 남은 김에, 나 역시 이 Clone UI 제작을 한 번 도전해봤다.

 

우선 Clone UI를 만들면서 두 가지에 주안점을 뒀다.

최대한 원본과 유사하게 UI를 구성하기.

그리고 RecyclerView와 Fragment는 무조건 구현해보기.

 

아직 완성되지는 않아서 결과물을 직접 올리지는 않고, Clone UI를 해보면서 느낀점들만 간략하게 적어본다.

  1. Fragment 만들기가 굉장히 어렵다. 이걸 구현하려고 하면 중간에 오류가 생기고, 다른 방법을 통해서 Fragment를 생성하려고 해도 또 오류가 생겨서 우선 오늘은 이 Fragment 구현에는 실패했다.
  2. UI 디자인/아이콘 이미지 파일을 구하기가 어렵다. 화면을 캡쳐해서 그걸 잘라 붙이는 방식은 화질도 떨어지고, 무엇보다 노가다성이 짙어서 웬만하면 원본 파일을 찾으려 했는데 어지간하면 저작권 이슈로….
  3. 이 많은 DB들을 어떻게 관리하는지 참으로 대단하다고 느껴진다. 본인은 그 조그마한 DB로도 오류는 안 생기는지, 제대로 적용하는지 점검하는 데에 시간을 많이 썼는데.

그래도 이번에 Clone UI를 만들면서 마냥 어렵게만 느껴졌던 ScrollView나 RecyclerView를 어느 정도 사용할 수 있게 되었다는 긍정적인 면도 있었다.

 


 

그리고 어제 좋아요 기능이 작동하지 않는 오류가 있었는데 오늘, 드디어 고쳤다!

 

코드를 하나하나 꼼꼼히 확인해본 결과, 문제가 있는 부분을 간신히 찾아냈다.

좋아요 기능을 추가한다고 코드를 일부 갈아엎었는데 그 과정에서 일부 레거시 코드가 그대로 남아 있었다. 그래서 이 부분을 고쳤더니 정상적으로 작동.

이거 하나 때문에 그렇게나 애를 먹다니.

 

아무튼, 갖은 우여곡절 끝에 좋아요 기능까지 완성!

 

다음은 좋아요 기능을 구현한 영상이다.