본문 바로가기
CS

라이브러리, 프레임워크, UI

by Rayched 2023. 11. 15.

0. 개요

우리가 게시판 형태의 웹 사이트를 만든다고 가정해 보자.

게시판을 만들 때 구현할 기능으로는 회원 가입, 게시글 작성, 게시물 목록 표시 등이 존재하고

이를 구현할 때 모든 기능을 처음부터 끝까지 만들 수도 있고

아니면 일부 기능은 다른 사람이 만들어둔 부품, 소프트웨어를 가져오고

그걸 잘 조합해서 우리가 원하는 형태의 웹 페이지로 만들 수도 있다.

 

여기서 웹 페이지를 만들 때 활용했던 다른 사람이 만들어놓은 부품, 소프트웨어로

라이브러리 Library프레임워크 Framework를 예로 들 수 있다.

 

이번에는 라이브러리 Library프레임워크 Framework의 정의를 먼저 다루고

추가적으로 UI, 사용자 인터페이스의 정의에 대해서도 정리해 봤다.

바로 본론으로 들어가도록 하자.


1. 라이브러리 Library
2. 프레임워크 Framework

3. 사용자 인터페이스 User Interface, UI
4. Reference

1. 라이브러리 Library

라이브러리란 내가 만들려는 프로그램에 필요한 기능을 잘 정리해서 모아둔 소프트웨어를 말한다.

Library라는 단어는 "도서관"이나 "서재"라는 의미를 가진 명사로

단순 명사로서의 Library와 개발 관점에서의 Library는 어느 정도 일맥상통하는 부분이 있다.

어느 부분에서 명사 Library와 프로그래밍에서의 Library가 일맥상통하는 부분이 있다는 것일까?

 

우리가 도서관을 갔을 때, 도서관의 서적이 다루는 내용에 따라

소설, 철학, 과학, 법률 등 종류 별로 나눠져서 배치된 것을 본 적이 있을 것이다.

그리고 우리가 찾는 서적에 따라 찾아가는 책장도 다르다.

 

소설을 찾는다면, 소설 만이 배치된 책장을 찾고

법률과 관련된 서적을 찾는다면, 법률 관련 서적을 모아둔 책장으로 갈 것이다.

 

프로그래밍에서의 라이브러리는 다른 사람이 만들어둔 프로그램의 집합체 같은 느낌으로

그중에서 우리한테 필요한 기능을 가진 프로그램을 꺼내서 현재 개발 중인 프로그램에 적용시킬 수 있다.

어떻게 보면 도서관에 책들이 종류 별로 정리되고

특정 종류의 서적을 모아둔 책장에서 내가 원하는 책을 꺼내는 모습과 비슷한 느낌이다.

 

즉, 개발 관점에서의 라이브러리에 대해 정리해 보자면

다른 사람이 만들어둔 특정 기능을 하는 프로그램들을 모아둔 일종의 개발 도서관이라고 정리할 수 있다.

 

라이브러리를 도서관 책장으로 비유한 그림

 


2. 프레임워크 Framework

framework는 "뼈대 (골조)", "틀"이라는 의미를 가진 명사로

프로그래밍에서 프레임워크는 우리가 프로그램을 개발할 때 기본적으로 공통되는 부분을 구현된 상태에서

우리한테 필요한 부분만 수정해서 프로그램을 완성할 수 있게 해주는 소프트웨어를 말한다.

즉, 반제품 소프트웨어 같은 느낌이다.

 

프레임워크를 활용해서 프로그램을 만든다고 가정해 보자.

내가 개발할 프로그램이 모바일 앱을 만들어야 하는데, 앱의 모든 logic을 처음부터 끝까지 구현하기는 쉽지 않다.

하지만 프레임워크를 활용해서 모바일 앱을 개발한다면

앱 개발에서 필수적이고 기본적인 부분의 코드는 구현된 상태이므로

이제 여기서 나한테 필요한 기능에 해당되는 코드만 작성하면 내가 만들고 싶어 했던 모바일 앱을 완성할 수 있다.

 

앞에서 설명했던 라이브러리처럼 프레임 워크도

다른 사람이 구현해 놓은 코드를 가져와서 쓴다는 점은 같지만

 

라이브러리는 개발 흐름의 주체를 개발자가 가지고 있지만

프레임워크는 개발 흐름의 주체를 프레임워크가 가지고 있다는 차이점이 존재한다.

 

쉽게 이야기하자면 라이브러리는 도서관에 있는 책들이라고 생각하면 된다.

지식을 습득하기 위해서, 프로그램을 개발하기 위해서 라이브러리에서 책, 특정 동작을 수행하는 코드를

개발자가 꺼내와서 사용하는 것이기 때문에 개발 흐름의 주체를 개발자 본인이 가지고 있지만

 

프레임워크는 기본적인 부분은 완성된 상태에서

나머지는 개발자가 원하는 형태로 제작하는 반제품 같은 소프트웨어이기에

 

프로그램을 완성할 때 내가 구현해야 할 부분을 프레임워크가 알려주고

그 부분을 구현해 나가는 식으로 개발이 진행되기에

개발 흐름의 주체가 개발자가 아닌 프레임워크가 가지고 있다고 하는 것이다.


3. 사용자 인터페이스 User Interface, UI

사용자 인터페이스, 속칭 UI (User Interface의 약어)란 사용자와 프로그램 간의 입력과 출력을 제어해서

사용자와 프로그램 서로 간의 상호작용을 할 수 있게 하는 소프트웨어를 말한다.

네이버, 구글, 유튜브와 같은 웹 페이지에서 볼 수 있는 버튼들이 여기에 해당된다.

 

이해를 돕기 위해서 네이버 홈페이지를 예시로 들어보도록 하겠다.

 

 

네이버 홈페이지로 들어가서 '웹툰' 버튼을 클릭해 보자.

그러면 아래와 같이 네이버 웹툰 페이지로 넘어갈 수 있다.

 

 

여기서 우리가 '네이버 웹툰'이라는 웹 페이지로 넘어갈 때 클릭했던 '웹툰' 버튼이 UI, 사용자 인터페이스이다.

사용자인 우리가 네이버 홈페이지에서 '웹툰' 버튼을 클릭했을 때

"네이버 웹툰 페이지 보여줘."라는 요청을 네이버 홈페이지 측으로 전송을 하게 된다.

그리고 이러한 요청을 받은 네이버 홈페이지는 '네이버 웹툰'이라는 웹 페이지를 응답으로 전송을 해준다.

 

 

여기서 우리, 사용자는 클라이언트(Client)라 하며, 네이버 홈페이지는 서버 (Server)라고 한다.

쉽게 이야기하자면 클라이언트는 '네이버'라는 웹 서비스를 이용하는 사용자를 말하며

서버는 '네이버'라는 웹 서비스를 제공하는 서비스 제공자라고 할 수 있다.

 

그리고 위의 그림과 같이 클라이언트 측에서 "네이버웹툰 페이지 보여줘."라는 식의 요청 (Request)를 보내면

이를 받은 서버 측에서 이에 대한 응답 (Response)으로 네이버 웹툰 페이지 (네이버웹툰. html)를

클라이언트, 사용자의 컴퓨터로 전송을 한다.

그리고 이를 받은 사용자 측의 컴퓨터에서 응답 결과 (네이버웹툰 페이지)를 출력한다.

 

이번 게시글에서 클라이언트와 서버에 대해서는 자세하게 다루지는 않고

추후에 개인적으로 공부를 더한 다음에 개별적으로 다루도록 하겠다.


이제 다시 네이버 웹툰 페이지로 돌아와서 웹 브라우저 화면 상단의 주소창을 확인해 보면

아래와 같은 URL을 확인할 수 있을 것이다.

위의 URL을 복사한 다음, 네이버 홈페이지로 돌아와서 주소창에 복사했던 URL을 입력하고

[Enter]를 클릭하면 아래와 같이 네이버 웹툰 페이지로 넘어가는 것을 확인할 수 있다.

 

웹 브라우저 상단 주소창에 위와 같은 URL을 입력하고, Enter 키를 눌러보자.
URL 입력 후, Enter를 누르면 네이버 웹툰 페이지로 넘어간다.

 

 

이런 식으로 URL을 입력하는 것으로 '네이버 웹툰' 페이지로 넘어갈 수 있다.

 

하지만 주소창에 URL을 입력해서 내가 원하는 웹 페이지로 넘어간다는 것은

웹 서비스를 이용하는 사용자 입장에서는 번거로울 것이다.

 

물론 이런 식으로 일일이 URL을 입력해서, 내가 원하는 웹 페이지를 서버로부터 받아내지 않아도 된다. 

'네이버'라는 웹 서비스를 제공하는 제공자 측에서 '웹툰' 버튼이라는 사용자 인터페이스, UI를 만들어놨기 때문에

이를 클릭하면 내가 URL을 입력하지 않아도 UI가 서버로 요청하는 작업을 대신해 주기 때문이다.

 

즉, 사용자 인터페이스, UI는 말 그대로 사용자(클라이언트)와

서비스 제공자(서버) 간의 상호작용을 용이하게 해주는 프로그램인 것이다.


4. Reference

📃 라이브러리와 프레임워크(생활코딩)
📃 라이브러리? 프레임워크? 차이점 아직도 모름? 5분 순삭 (노마드 코더)
📃 프레임워크와 라이브러리의 차이점 (Web Club / 티스토리 블로그)

 

라이브러리와 프레임워크의 정의에 대해 간단하게 공부하고 이를 블로그에 정리하였다.

글을 쓰다 보니 이론적으로 부족한 것이 좀 많이 보였지만, 일단 무시하고 그대로 계속 써버렸고

결과적으로 많이 불만족스러운 글이 만들어졌다.

 

나중에 라이브러리와 프레임워크의 이론적인 내용을 좀 더 공부하고 나서

지금 부족하다고 느꼈던 부분을 보완하기로 하고 여기서 마치도록 하겠다.

'CS' 카테고리의 다른 글

동기와 비동기 그리고 Blocking & Non-Blocking  (1) 2024.03.26
프로그램과 프로그래밍 언어  (0) 2022.07.16