[프로젝트 일지] 210831(화) ~ 210909(목) - 프로젝트 시작 계기, 디자인, 컴포넌트 제작, 계산 로직 구성

목차

• 프로젝트 시작 계기
• 디자인
• 컴포넌트 제작
• 계산 로직 구성

프로젝트 시작 계기

우아한테크코스 교육을 받으면서 중간에 시작한 스터디가 있다. 스터디 이름은 CSS-IDIOTS인데, 어느 순간 우리들은 더 이상 IDIOT까지는 아니라고 생각해 조용히 사라진 그런 스터디이다. 비록 스터디는 사라졌지만, 이 스터디원들과 꽤나 친해서 생각보다 자주 만났다. 만나면 먹고 마시고 뿜빠이하고, 먹고 마시고 뿜빠이했다. 같은 코드가 반복되면 함수가 만들어지는 것처럼, 같은 행동이 반복되어 이 앱은 탄생할 운명이었던 것 같다. 하지만, 이것만으로는 조금 부족했다. 미션, 팀 프로젝트, 기술 부채 해소 등 충분히 다른 것들에 의해 시달리고 있었기 때문이다. 이런 상황에도 불구하고 이 앱이 세상으로 나올 수 있었던 이유는 배움의 욕구 때문이었다. 팀 프로젝트에서 타입 스크립트를 쓰지 않았기에 나에게 타입 스크립트는 미지의 영역처럼 느껴졌는데, 타입 스크립트를 적용해 볼 좋은 기회라는 생각이 들었다. 하고 싶었던 주제에 필요성도 느껴지다 보니 프로젝트는 일사천리로 진행됐다.

디자인

전체적인 UI 테마는 뉴모피즘(예시)을 적용했다. 뉴모피즘을 선택하게 된 이유는 사실 특별히 없다. 예전에 트랜드 기사를 통해서 뉴모피즘을 처음 알게 되었는데, 그때부터 다음 프로젝트에서 한 번 해보고 싶다는 생각을 가지고 있었다. 뉴모피즘에 대해서 찾아보다가 뉴모피즘의 단점이 담긴 글을 읽었다. 뉴모피즘 자체가 그림자와 빛으로만 UI를 구분하다 보니 접근성 자체가 매우 낮다고 했다. 특히, 매우 시력이 낮거나 노약자에게는 치명적이라고 했다. 많이 고민이 됐다. 모든 서비스는 사용자를 위해서 존재해야 한다고 생각하기 때문이었다. 결론부터 말하면 일단 뉴모피즘을 버리지는 않았다. 그 이유는 이 앱을 가장 먼저 테스트하게 될 사용자는 더 이상 IDIOT이 아닌 IDIOT 톡 방 크루들이기 때문이다. 하지만 뉴모피즘은 곧 걷어내질 예정이다.. 언제 없어질지 모르니 여기 사진이라도 남겨놓아야겠다.

컴포넌트 제작

컴포넌트는 전체적으로 크기를 제한하는 Frame, 제목인 Title, 사용자의 입력 부분과 관련된 InputContainer, 버튼에 사용되는 Button, 결과를 보여주는 Result로 구성되어 있다. 다른 부분은 큰 고민이 없었는데, 아무래도 InputContainer는 조금 고민이 된다. 지금 보니 초기화와 계산하기 버튼은 따로 빠져 있는데, 추가와 삭제 버튼은 InputContainer 안에 포함되어 있어서 통일성을 위해 분리해야 할 것 같은 생각도 든다.

계산 로직 구성

계산 로직을 짜기 전에 먼저 해당 로직의 input과 ouput 데이터 형태를 설계했다.

// input
[
  { name: '신세', cost: 39000 },
  { name: '티케', cost: 6300 },
  { name: '디토', cost: 17000 },
  { name: '미키', cost: 0 },
  { name: '주모', cost: 0 },
];

// output
[
  { sender: '티케', receiver: '신세', cost: 6160 },
  { sender: '미키', receiver: '신세', cost: 12460 },
  { sender: '주모', receiver: '신세', cost: 7920 },
  { sender: '주모', receiver: '디토', cost: 4540 },
];

사용자에게 입력받은 이름(name)과 지불 금액(cost)을 객체로 받아 배열로 로직에 넘기면, 다시 객체들이 담긴 배열을 반환하는 식이다. 반환되는 배열 속 객체에는 돈을 보내야 하는 사람(sender)과 받아야 하는 사람(receiver), 금액(cost)이 들어있다. 처음에는 output의 구조를 다른 방식으로 했는데, 이후 디자인이 변경되더라도 쉽게 적용할 수 있도록 지금과 같은 방식으로 변경했다.

계산하는 로직은 간단하다. 총 4개의 배열이 있는데, 각각은 이름, 지불한 금액, 보낼 금액, 받을 금액이다. input을 객체로 받았지만, 모두 배열로 변환하여 인덱스로 해당하는 사람을 구분할 수 있도록 했다. 돈을 보내야 하는 알고리즘은 사람과 다른 사람 즉, 1 대 1의 관계이고 누락되는 부분이 없어야 하므로 보낼 금액 배열과 받을 금액 배열을 이중 for 문으로 돌렸다. 이중 for 문 안의 조건으로는 서로 같은 사람(i == j)이 아니며, 보낼 돈이 있고(moneyToSend[인덱스] !== 0), 받을 돈이 있는(moneyToReceive[인덱스] !== 0) 경우로 설정하여, 각각을 비교했다. 참고로 moneyToSend와 moneyToReceive 배열은 사람들이 지불한 총 금액을 인원수로 나눠 1인당 지불할 금액을 구했고, 이를 배열의 요소를 구성했다.