UI(User Interface) 란?
UI는 쉽게 말해서사용자가 앱을 사용할 때 마주하는 디자인, 레이아웃, 기술적인 부분 등을 말합니다.
단순히 디자인, 레이아웃, 기술적인 부분이라고 표현했지만 디자인의 구성요소인 폰트, 칼라, 줄 간격 등 상세한 요소가 포함되며, 기술적인 부분은 반응성, 입출력단계, 애니메이션효과 등 여러 부분을 포함합니다.
UI는 다양한 사용자가 사용할 수 있도록 보편성을 지녀야 하며 전체적으로 사용에 있어 큰 불편함이 없어야 합니다.
좋은 UI는 대부분의 사용자가 높은 만족도를 가져야 하며 어쩔 수 없이 발생하는 주관적인 불만족을 최소화 시켜야 합니다.
컴포넌트(Component) 란?
유래
소프트웨어는 독립적으로 개발되지 않은 경우가 많고, 독립적으로 개발되어도 다른 모듈과의 호환을 생각하지 않고 개발합니다.
이는 소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 됩니다.
이러한 상황에서 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술입니다.
컴포넌트 특징
컴포넌트의 특징은 바로 재사용성(reusability) 과 대체성(replaceability) 에 있습니다.
재사용성이란 컴포넌트가 독립적인 기능 혹은 서비스를 제공하는 독립적인 모듈이므로 이를 필 요로 하는 여러 애플리케이션에서 반복적으로 재사용되도록 한다는 것입니다. 따라서 이는 코드 수준에서의 재사용이 아니라 실행 모듈 단위의 재사용입니다. 즉, 애플리케이션 개발의 관점을 둔 구현이 아니라 이미 만들어진 부품을 바탕으로 조립하는 것으로 인식해야 한 다는 것입니다.
xcode UI컴포넌트를 활용한 iOS 개발 화면
UI 컴포넌트 관리 툴
프론트엔드 개발의 패러다임이 컴포넌트로 넘어오면서 개발자들은 일종의 모순에 봉착했습니다. 개발은 컴포넌트 단위로 진행하지만 실제 개발환경은 항상 페이지 단위로 만들어진다는 점입니다. 현재 개발하고 있는 서비스에서 사용하는 수 많은 버튼의 상태를 의존성과 환경변수가 걸려있는 페이지에서 일일이 코드를 변경해가며 테스트해야 했었고 여전히 그렇게 진행하고 있는 케이스도 있습니다. 이렇게 개발을 진행하게 되면 개발자는 온전히 뷰에 집중하기 어려워지고 컴포넌트의 의존성을 쉽사리 파악하기가 어려워집니다. 컴포넌트를 진짜로 고립시키지 못하게 되는겁니다. 이는 당연히 컴포넌트의 재사용성을 감소시킵니다.
이런 문제를 해결할 수 있는, 컴포넌트 단위의 개발 환경을 지원하는 도구로는 대표적으로 Storybook이 있습니다.
Storybook은개발자가 뷰를 개발할 때 고립된 환경을 제공해서 관심사를 의존성과 환경으로부터 분리시켜 줍니다. 그리고 개발자는 비로소 뷰에 집중할 수 있게 되고, 외부 상태에 의존하지 않으면서 고립된 상태로 스스로를 표현하는 컴포넌트를 개발할 수 있게 됩니다.
컴포넌트 장점
개발 생산성
복잡한 개발 문제를 적당한 구현 단위로 분해하고, 조립 방식으로 애플리케이션을 개발할 수 있어 개발 생산성을 높일 수 있습니다. 이는 컴포넌트의 경우 모든 접근이 인터페이스를 통해서만 이루어지므로 독립적인 개발과 배포가 가능하다는 특성에서 유래합니다. 따라서 사용자들은 필요한 컴포넌트를 직접 개발하지 않고 요구사항에 부합하는 컴포넌트를 활용할 수 있습니다. 이처럼 미리 개발된 컴포넌트를 이용할 경우 개발 생산성을 극대화할 수 있습니다.
유지보수성
컴포넌트가 제공하는 완벽한 캡슐화 기능을 통해 변화 또는 에러의 영향을 해당 컴포넌트 내부로 한정시킬 수 있어 유지보수성이 높습니다. 예를 들면, 업무처리 방식이 바뀌어 비즈니스 로직이 달라질 경우, 전체 시스템을 재개발하지 않고 해당 컴포넌트를 수정하거나 새로운 항목으로 대체함으로써 이러한 변화를 수용할 수 있습니다.
성능 개선 용이
성능 극대화를 위해 개발된 애플리케이션을 시스템∙네트워크에 최적으로 분산 배치할 수 있는 단위로 나눌 수 있어 시스템의 업사이징(upsizing) 또는 다운사이징 (downsizing)에 신속하게 대응할 수 있습니다. 이를 통해 새로운 기능 추가, 성능 개선, 시스템 스케일의 변화 등에 손쉽게 대처할 수 있습니다.
독립성
표준화된 아키텍처를 준수하므로 내부 설계나 코드와 같은 컴포넌트 구현부를 새로운 기능 혹은 향상된 성능을 제공하는 다른 컴포넌트로 손쉽게 교체할 수 있습니다.
컴포넌트 개발 시 주의사항
구현, 명세화, 패키지화, 배포 필요
- 컴포넌트는 구현, 명세화, 패키지화, 그리고 배포될 수 있어야 합니다.
- 컴포넌트의 정의나 형태는 관점에 따라 다양하게 존재하지만, 재사용 부품으로서의 컴포넌트가 되기 위해서는 소스코드가 아닌 실행코드 기반으로 재사용할 수 있도록 이미 구현이 완료되어 있어야만 합니다.
- 교체 가능한 컴포넌트를 개발하기 위해서는 표준을 준수하여 개발해야 합니다.
- 컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화 되어 있어야 합니다.
- 독립적인 업무 단위로 개발된 것이므로 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용 할 수 있도록 독립적으로 배포 가능해야 합니다.
- 컴포넌트는 해당 컴포넌트의 용도, 유형, 기술 표준과 인터페이스 등에 대한 정보들에 대해서 명세화 되어 있어야만 하고 교체 가능한 컴포넌트를 개발하기 위해서는 표준을 준수하여 개발해야 합니다.
인터페이스를 통해서만 접근 가능
컴포넌트는 인터페이스를 통해서만 접근이 가능합니다. 컴포넌트는 은닉성을 가지고 있어 외부에서 접근할 수 있도록 컴포넌트가 제공하는 서비스를 정의한 인터페이스만을 제공하고 컴포넌트를 사용하기 위해서는 어떤 인터페이스를 사용해야 하는지 만을 알 수 있습니다.
따라서 인터페이스는 외부와의 연결을 위해 반드시 존재해야만 합니다. 이와 같이 컴포넌트가 내부 정보를 숨기고 인터페이스만 제공함으로써 소프트웨어도 하드웨어처럼 조립 기반으로 갈 수 있게 됩니다.
인터페이스(영어: Interface, 문화어: 대면부, 결합부 또는 접속기)는 사물 간 또는 사물과 인간 간의 의사소통이 가능하도록 일시적 혹은 영속적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 의미합니다.
다리미로 예를 들자면 손잡이, 버튼들이 인터페이스라고 할 수 있습니다.
이처럼 컴포넌트를 개발할 때는 고려해야 할 부분이 많기 때문에 개발하고자 하는 시스템에서 필요로 하는 기능 및 서비스를 제공하는 컴포넌트를 식별하고 이를 정의하는 것이 핵심입니다. 그리고 이 단계에서 많은 시간을 필요로 합니다.
참고
https://brunch.co.kr/@aw2sum/36
http://wiki.hash.kr/index.php/컴포넌트
http://javasolution.co.kr/컴포넌트-기반-방법론/
https://ditoday.com/ui-이해하기-인터페이스란-무엇인가/
https://hyunseob.github.io/2018/01/08/storybook-beginners-guide/