본문 바로가기

Computer/일반

Reactive App, Responsive Web and Adaptive Web... and... and...

Reactive vs Responsive

한글로 번역하면 모두 '반응형'이라는 단어로 번역되어 버렸다.
해서 반응형 웹을 먼저 접한 나에게 react 라는 단어는 원자로(nuclear reactor)에나 등장하는 용어였다.
이후에 등장한 react.js 로 부터 '반응형'이라는 번역은 혼란을 가져왔다.

 

 

 

Responsive Web(반응형 웹)

은 이전의 데스크탑 위주의 브라우저 환경에서 벗어나 태블릿, 휴대폰 등 여러 크기의 브라우저에서 동일한 콘텐츠를 접할 수 있도록 디자인한 웹을 말한다.

1 개의 웹을 만들어서 크기에 "대응" 해서 컨텐츠의 레이아웃 등이 변경되는 웹이다.
* "대응"형 웹 이라고 번역했으면 좋지 않을까 생각해 본다.

 

Adaptive Web(적응형 웹)
은 반응형과 달리 특정 해상도에 "맞춤형"으로 미리 제작된 디자인을 해당 해상도 일경우 보이도록 구성한 웹을 말한다.
* "맞춤"형 웹 이라고 번역했으면 좋지 않을까.

[참고]
반응형 웹 디자인 vs 적응형 웹 디자인: 어떤 유형을 선택해야 할까?
https://ko.wix.com/blog/post/responsive-vs-adaptive-design

 

 

Reactive App(or Service)


"반응형" 어플리케이션(앱) 혹은 서비스라고 부르는 것은 대부분 지정된 지시의 순서에 의해 동작하는 "명령형" 프로그래밍(imperative programming)에 반해 데이터의 흐름과 변경사항의 전파에 중점을 둔 선언적 프로그래밍으로 만들어진 애플리케이션(서비스)이다.

?? 어렵다.

쉽게...

 

명령형
아침 9시 ~ 10시 까지는 우유를 모으고
11시 ~ 12시 까지는 우유를 병에 담고
13시 ~ 14시 까지는 우유병을 포장해서 출고

 

반응형
소의 우유가 모아지는 데로 병에 담는 공정으로 이동
우유가 병에 담아지는 데로 포장공정으로 이동
일정 우유병이 포장되는 데로 출고

 


위의 예시를 보면 
명령형은 데이터와는 별개로 다음 공정으로 넘어가는 것이 미리지정된 시간이다.
그러나 반응형은 진행되는 자원 즉 데이터에 의해 다음 공정으로 진행된다.

 

명령형
첨부파일을 첨부하는데 첨부파일 선택을 마치고 별도의 [업로드] 버튼을 누르기 전까지 첨부파일은 처리되지 않는다.

 

반응형
첨부파일을 선택하는 액션에 발생할 때마다 해당 첨부파일은 처리된다. 마침의 작업과 별도의 [업로드] 버튼이 없다.

 

 

위 예시는 아래 도서를 참고했다.
로렌티우 스필카 저, "스프링 시큐리티 인 액션", 최민석 역, 위키북스, 2022 

 

그러나

 

반응형이 무조건 만능은 아님 (은 총알은 없음)

 

[주의]
기존의 애플리케이션 구성을 무조건 반응형으로 바꾸면 혼란이 가중됨
해당 패러다임을 도입하기 전에 사전에 반응형에 대한 지식습득과 설계가 동반되어야 함.

 

Java에서 해당기술로 유명한 것은 스프링 리액터 라이브러리(Spring Webflux) 임.
REST service 등과 리액티브 프로그래밍의 패러다임들이 MSA(Micro Service Architecture)를  트렌드로 만들고 있음.