[개발] 설계 어떻게 하지..?

회사에서 진행하는 프로젝트에서 꽤 큰(?) 비중의 기능을 구현하게 되었습니다. 그래서 개발 전에 설계를 먼저 했는데 어떻게 해야할지 많이 헤맸던 것 같습니다...! 그래서 프론트엔드 설계는 어떻게 해야하는지 공부하며 정리한 글입니다. 

그러면 설계란 왜 필요한 것이고 정확히 어떤 개념일까요?

설계란?

설계 (設計)
베풀 설 (設), 셀 계 (計)라는 한자로 사전적 정의는 일반적으로 계획을 세우는 일을 통들어서 설계라고 지칭합니다.
공학, 토목, 전자 등의 분야에서는 목적물을 만들기, 변경, 해체하는 일에 대한 계획을 세우는 일을 의미합니다.

 

소프트웨어의 관점에서 설계는 우리가 만들 제품을 어떻게 만들지에 대한 계획을 세우는 일이라고 할 수 있습니다.

 

설계 왜 하는 걸까?

그런데 설계는 왜 하는 걸까요? 

집을 짓는다고 가정했을 때, 집을 짓기 전에는 설계도를 그려 어떻게 집을 지을지 먼저 구상해봅니다. 그런데 설계도 없이 머릿속의 생각만으로 집을 지을 경우, 실수로 기초 공사를 잘못해 결함이 생기면 집을 다시 짓게 되거나 처음에 목표했던 집과는 다른 결과물의 집이 지어질 수도 있으며 구체적인 계획 없이 건설하면 유지보수와 수리가 어려울 수 있습니다.

즉, 설계를 통해 문제점을 미리 예측해 예방하고 일관성 있는 작업과 효율적인 작업 방식을 보장할 수 있습니다.

 

설계를 잘하려면?

위에서도 보시다시피 소프트웨어 관점에서 설계는 제품을 어떻게 만들지 계획을 하는 것이라고 했습니다. 그렇다면 좋은 설계를 위해선 어떤 제품(서비스)를 만들지 구체적인 목표가 필요합니다.

어떤 서비스를 만들지 목표를 정할 때 고려 사항은 아래와 같은 것들이 있을 것 같습니다.

• 사용자 정보
  • 연령층, 성별, 특징 등
  • 사용자들은 서비스를 어느 시간대에 많이 사용할까?
  • 사용자가 한꺼번에 몰리면 어느정도의 트래픽이 발생할까?
• 서비스 목표
  • 서비스를 통해 어떤 문제를 해결할 수 있을까?
  • 위 문제를 해결함으로써 어떤 가치를 창출할까?
  • 서비스가 속한 시장의 규모와 규모를 기반으로 달성 목표 수치는 얼마인가?
  • 위 수치에 도달하기 위해선 어떤 노력을 할 수 있을까?

즉, 프로젝트 규모, 서비스 사용자들의 특성, 어떤 목표를 가지고 있는지 등에 대한 기준이 명확해야 올바른 설계를 할 수 있습니다.

 

설계시 고려사항?

어떤 제품을 만들건지 기준이 명확해졌다면 다음 단계인 설계를 진행해야 합니다. 그러면 프론트엔드 관점에서 서비스 설계시 고려사항은 어떤 것이 있을까요?

• 웹 접근성 (키보드 네비게이션, 스크린 리더 호환)
• 퍼포먼스 (이미지 최적화, 렌더링 최적화, 브라우저 캐싱)
• 보안 (인증, 인가)
• 인프라 (클라우드 서비스)
• SEO (URL 구조, 모바일 친화성)

지금까지의 과정을 보면 어떤 서비스를 만들지부터 시작해 작은 부분까지 고려하는 과정으로 넓은 범위에서 좁은 범위로 좁혀가면서 설계를 진행합니다.

서비스나 기능에 대한 설계를 할 때 시스템 디자인인이라는 것을 적용할 수 있습니다. 멘토님의 추천으로 알게 되었는데 한국보다는 해외에서 많이 사용된다고 하며 인터뷰시 시스템 디자인을 주제로 진행되는 경우도 있습니다.

 

시스템 디자인

시스템 디자인이란 무엇일까요? 일단 각 단어의 정의는 다음과 같습니다.

시스템 (System)
사전적인 정의로는 체계, 체제를 의미하며 각 구성 요소들이 상호작용하거나 상호의존하며 복잡하게 얽힌 통일된 하나의 집합체를 의미합니다.
시스템 사고 선구자 Russell Ackoff 교수는 시스템을 해체된 자동차 부품과 비교하여 설명합니다.
많은 사람들은 시스템을 어떤 부분의 집합이라고 착각하지만, 시스템은 이런 요소들을 단순히 모아놓은 것을 의미하지 않습니다.
마치 해체된 부품들을 자동차라고 말할 수 없는 것처럼, 시스템은 "각 부분의 조합이 상호작용을 할 때 그 결과"를 말합니다.

디자인 (Design)
도안, 계획, 설계를 의미하며 수립한 계획을 목적에 맞게 설계하며 발전시키는 것 또는 그 과정을 의미합니다.

 

소프트웨어 관점에서 시스템 디자인이란 애플리케이션을 설계하는 것 또는 그 과정이라고 할 수 있습니다.

다음은 프론트엔드 관점에서의 시스템 디자인을 설명하는 영상을 토대로 요약한 내용입니다.

보통 서비스의 기능이나 전체적인 구조를 어떻게 설계할 것인지 인터뷰로 물어보는 주제지만, 꼭 인터뷰 질문 주제가 아닌 프로젝트나 기능 설계시 적용하면 좋을 것 같습니다.

 

프론트엔드 시스템 디자인

프론트엔드 시스템 디자인

• Product Design (High Level Design)
  • 완전한 서비스를 설계하는 것으로 서비스의 예로는 whatsapp, facebook, netfilx가 있음
• Component Design (Low Level Design)
  • 서비스의 특정 요소를 설계하는 것으로 특정 요소의 예로는 검색바, 무한 스크롤 피드가 있음 

 

요구 사항 정의

예를 들어 검색바의 자동 완성을 주제로 할 경우, 먼저 요구사항을 명확히 해야 하며 예시로는 다음과 같습니다.

1. 구현하고자 하는 기능의 목표는 무엇인가?
2. 모든 검색바에서 자동 완성 기능을 구현해야 할까?
3. 검색시 타이핑 에러를 고려해야 할까?

 

시스템 설계

그 다음, 시스템 디자인에서 일반적으로 다음과 같은 고려사항을 생각할 수 있습니다.

시스템 디자인 계획

1. 기능적 요구사항
2. 비기능적 요구사항
3. 컴포넌트 구조
4. Props와 Events
5. 성능
6. 접근성

위 고려사항을 하나씩 자세히 살펴보겠습니다.

 

기능적 요구사항

• 사용자 입력시, 자동 완성 결과를 보여줄 것인가
• 사용자가 입력을 멈춘 경우, 디바운싱 처리를 할 것인가 (입력 이벤트가 발생할 때마다, 서버를 호출하므로 네트워크 과부하 방지 목적)
• 검색 결과는 커스터마이징할 수 있는가
• 정적 데이터, API의 결과인 동적 데이터를 모두 지원할 것인가

 

비기능적 요구사항

• 네트워크 효율성
• 구성할 수 있는 요소 (캐시 사이즈, 최소 쿼리 길이, 검색 결과)
• 성능
• 다양한 플랫폼을 충분히 지원할 수 있도록 구현
• 접근성
• 브라우저 호환성
• 모든 디바이스 지원 (모바일, 태블릿, PC)

 

컴포넌트 구조

자동 완성 컴포넌트 구조

• 기본적으로 input box에 검색어 입력시 하단에 자동완성 결과를 보여줘야 함
• 결과 중 1개를 클릭하면, 관련 결과 탭으로 이동

컴포넌트 설계시, 아래와 같은 고려사항이 존재합니다.

• suggestionItem에 아이콘 유무, 어디에 배치할 것인지
• 검색바에 X와 같은 입력값을 지울 수 있는 기능의 아이콘을 배치할 것인지
• 더 많은 검색 결과가 존재하는 경우, 페이징 처리를 할 것인지 혹은 무한 스크롤 형식으로 구현할 것인지

 

Props & Events

컴포넌트 설계가 끝났다면, 자동 완성 기능의 흐름과 Props, Events 인터페이스를 설계해야 합니다.

자동 완성 FLOW와 Props, Events 인터페이스 정의

1. 검색어 입력시 getSuggestions() 메서드를 통해 서버에 데이터를 요청
2. 응닶값은 Suggestion 타입의 배열인 Suggestions로 정의
3. 자동 완성의 각 결과는 ResultItem으로 렌더하며 타입은 Suggestion으로  id, text, imageUrl 프로퍼티로 구성

 

이제 컴포넌트를 개발할 경우, 위 고려사항에 추가로 고려해야 할 것이 있습니다. 바로 재사용 가능한 컴포넌트여야 한다는 것입니다.

사용자의 입장에서, 어떻게 편리하게 사용할 수 있을지 고려해 Props와 필요한 Events 혹은 UI States를 생각해보면 아래 사진처럼 설계할 수 있습니다.

 

 

결론

지금까지 프론트엔드 시스템 디자인에 대해 알아봤습니다. 처음에는 최소한의 조건을 만족하며 넓게 시작하지만 (High Level) 점점 좁혀가며 세부적인 내용(Low Level)들을 다루면서 설계를 구체화시켜나가면 됩니다.

마지막으로 제가 느낀 점은 설계 전 어떤 서비스, 어떤 기능을 구현할지 목표가 명확해야 설계에서 흔들리지 않게 되는 것 같습니다.

처음부터 설계하기는 쉽지 않겠지만 목표를 명확하게 설정하고 큰 조건에서 세부적인 조건들로 정의하며 설계하는 연습을 해봐야 할 것 같습니다.

긴 글 읽어주셔서 감사합니다.

 

참고 자료

https://brunch.co.kr/@712/51

시스템 디자이너가 말하는 시스템 디자인

https://ko.wikipedia.org/wiki/%EC%8B%9C%EC%8A%A4%ED%85%9C

시스템 - 위키백과, 우리 모두의 백과사전

https://www.youtube.com/watch?v=XPNMiWyHBAU