[React][개발기] 9. 리팩토링과 총 점검

깃허브 주소 ▼

GitHub - NOGUEN/dilemma_cafe_web

 

개요

---

이전 글 참고 ▼

[React][개발기] 8. Login 모달, 그리고 전체 점검의 필요성

 

 이전 포스트에서 등장한 문제점인 매직 넘버 해결하기 위해 전체적인 점검이 필요하다고 생각이 들어 이번에는 자주 사용하는 값들을 정의하고 프로젝트 전체 점검를 하기로 했다. ▼

이전 포스트에서 언급한 문제

 

매직 넘버의 문제

맥락의 이해

 사실 혼자서 작업을 하면 매직 넘버를 크게 신경쓰지 않아도 된다고 생각을 한다. 매직 넘버의 가장 큰 문제점이 다른 개발자가 봤을 때 맥락을 이해하지 못하는 부분이 생길 수 있다는 것이기 때문이다. 현재로써는 나 혼자서 개발을 하고 있기에 맥락 이해는 크게 신경쓰지 않아도 된다고 생각했다.

 

 허나 내가 코드를 작성했다고 해도 그걸 다 외우고 있는건 아니다. 코드는 점점 많아지고 있고 이걸 다 외우고 있지 않기에 내가 짠 코드지만 내가 어떤 맥락에서 짰는지를 다 이해하지 못 할 가능성이 충분하다. 게다가 현재의 나는 학습을 하며 프로젝트를 진행하고 있기에 현재 내가 짠 코드도 한 시간 정도 뒤에 다시 보면 정말 이상할 수 있다. 어느정도 궤도에 오르면 이렇게 코드가 차이나지는 않겠지만, 지금은 그 궤도에 올라가고 있는 중이기 때문이다. 

 

통일성 있는 UI

 이는 매직 넘버의 문제는 아니고 현재 두서없이 진행되고 있는 프로젝트의 문제점이다. 지금의 프로젝트는 간단한 디자인과 기획으로 애자일 하게 진행되고 있다. 문서를 모두 완벽하게 작성한 채로 진행되는 것이 아닌 순전히 나의 프로젝트에 대한 이해만으로 진행이 되고 있는 상황이다. 그렇기에 세세한 디테일이 떨어지는 문제가 발생하고 있다. 전문 디자이너가 디자인을 한다면 규격을 맞춰놓고 진행하기에 들쭉 날쭉한 부분이 없지만, 현재의 나는 규격을 맞춰놓지 않아 UI가 들쭉날쭉한 상황이다.

 

'여기는 `padding`을 `2px`로 두면 좋겠는걸?'

'아 근데 여기는 `3px`로 두면 괜찮을 거 같기도?'

'여기는 폰트를 `1.2rem`으로 두자.'

'어 저번에 폰트 크기 얼마로 했었더라? `1.3rem`이었나?'

 

이렇게 정말 두서없이, 규격없이 진행이 되고 있었다.

 

 하지만 이런 문제점 역시 매직넘버를 없애면서 해결할 수 있다. 테마나 규격을 모두 다 정해놓고 필요한 상황에서 이를 사용하면 사이트 전체적으로 통일감 있게 UI를 구성할 수 있게 된다. 예를 들면, `body1Regular`라는 폰트 스타일을 `font-size: 1.2rem; font-family: \"Pretendard\";`로 정의해놓았다면 이후에 세부적인 내용을 기억하지 않아도 '아 이런 컴포넌트에서는 `body1Regular`를 적용하는게 좋지' 하고 적용할 수 있게 된다.

 

---

 

그래서 이를 적용하기 위해 Notion을 이용하여 전체적인 테마를 문서화 해두었다. ▼

팀 단위 문서화 및 업무 정리용으로 최고다.

 

 

Notion을 통한 정리

---

정리된 Notion은 아래의 링크에서 볼 수 있다. 만약 보고 필요하다면 복제해서 사용해도 괜찮다. (퀄리티가 좋지는 않지만...) ▼

Dilemma Cafe | Notion

 

정리한 요소들

가장 먼저 Theme 페이지를 만들어 정리했다. ▼

사이트 전체 테마와 관련된 요소들을 정의했다.

 

해당 페이지에 들어가 있는 요소는 다음과 같다. ▼

• Font Style
• App Color
• Padding
• Radius
• Icon Size
• 기타 등등... 필요하면 추가 예정

 

Font Style 테이블

 Font Size 테이블에는 `font-size`, `font-weight`, `font-family`, `rem`, `line-height` 열이 있다. 이 중에서 `line-height`의 경우 현재 프로젝트에서 사용하지 않아 빈 값으로 두었지만 언젠가 필요할 수 있을 거 같아 남겨두었다. 프로젝트에 필요한 요소들을 정의해두었고 보기 좋게 태그와 수식을 사용했다.

 

데이터베이스 수식1: rem

 가장 먼저 간단한 수식인 `rem` 수식이다. 지금 rem의 기준은 `10px` 이므로 그냥 `Size`에서 `10`을 나누면 되지만, 만약에 기준 사이즈가 바뀌게 된다면 이를 좀 더 보기 편하게 해주기 위해 rem으로 변환해주는 수식을 넣었다. ▼

(prop("Size") / 10) + "rem"

이렇게 변환된다.

 

해당 수식은 Font Style 테이블 말고도, Padding, Radius, Icon Size 테이블에도 적용되어있다.

 

데이터베이스 수식 2: Font Weight

 이는 정말 필요한 수식은 아니지만, 혹시 헷갈릴까봐 넣어두었다. Font Weight 속성의 값을 읽어서 텍스트 형식으로 변환해주는 수식이다. 만약 `w500`이면 `Medium`, `w400`이면 `Regular`로 변환해준다. ▼

if(prop("Font Weight") == "w700", "Bold",
if(prop("Font Weight") == "w600", "SemiBold",
if(prop("Font Weight") == "w500", "Medium",
if(prop("Font Weight") == "w400", "Regular",
if(prop("Font Weight") == "w300", "Light", "Not Defined")))))

 

`Regular`보다 얇은 폰트는 사용하지 않기 때문에 여기까지만 적용을 해두었다.

 

App Color

 색상을 모아놓은 곳이고, 아이콘에 색상을 넣어두어 이 색이 어떤 색인지 알 수 있게 해두었다. 또한 색상 코드도 태그로 넣어두어 복사하기 쉽게 설정해두었다. ▼

컬러 팔레트(디자인이 다 나온게 아니라 추가 예정)

 

 

"와 노션에 이런 기능이 있었어?"

 

 노션에는 컬러 팔레트 기능이 없다. 색 채우기를 한 100 * 100 이미지를 피그마에서 가져와 넣었다. 색상이 몇 개 안되어 금방 가져다가 넣을 수 있어 한 10분 시간내어 넣었다. 약간은 귀찮은 과정이 될 수 있는데, 이렇게 색을 미리 넣어놓으면 gray500, gray400과 같은 색이 어떤 색을 나타내는지 알기가 쉬워진다. VS코드에 기본 기능으로 색상 팔레트 기능이 추가되긴 했지만, Styled-Component를 사용할 때 백틱 안에 넣은 색상 코드들은 볼 수 가 없어서 노션에서라도 볼 수 있게 추가했다. ▼

리터럴 값으로 들어가면 읽지 못한다.

 

Padding, Radius, Icon Size

Padding, Radius, Icon Size는 아래의 이름 규칙으로 값들을 넣어두었다. ▼

 

$ name + size $

 

그리고 `Size`와 `rem`(수식) 속성만 넣어서 구성했다. ▼

데이터베이스들

 

사실 값들을 미리 정의해 놓을 생각이라면 `rem`이 아니라 `px`단위로 해도 되는데 기본 사이즈가 변경되면 해당 사이즈들도 다 바뀌는게 좋을거 같다고 생각이 되어 `rem`단위를 골랐다. `root size`가 증감할 때 UI가 상당히 바뀔 거 같아 걱정이 되긴 하지만, 기본 근간은 바뀌면 안되는게 프로젝트의 기본 원칙이기에 바뀌지 않는 것을 기본으로 두고 했다. 기본 근간이 바뀌어야하는 상황이 오면 최대한 기본 근간을 바꾸지 않는 방향으로 수정할 예정이다.

 

 

그 외의 정리가 필요한 요소들

---

 사실 위의 테마만 정리한다고 되는건 아니다. 웹에서 정해야하는 것들이나 모바일에서 정해야하는 것들, 그리고 백엔드 API등등이 있는데 아직 완벽하게 정해진 것들이 없어서 정리가 더 필요하다. 특히 백엔드는 Supabase로 하고 있어 정리가 더 필요하다. ▼

 

 

마치며

---

 기한이 굉장히 촉박한 프로젝트라서 이렇게 정리를 할 시간을 내는게 쉽지 않았는데, 큰 맘 먹고 시간을 내어 정리를 했다. 이렇게 정리를 하는게 추후의 프로젝트를 하는 속도를 더 높여줄거라고 생각한다. 나중에 이게 뭐였지... 하고 허둥대는 시간을 획기적으로 줄여줄 것이다. 지금은 노션이 좀 구린 상태인데 나중에 완성된거 보고 프로젝트에 필요하다고 생각이 되면 복제해서 사용해도 된다.