LG CNS 부트캠프 학습일지 3일차

학습 내용

• 반응형 웹사이트 기초
• 테이블 태그 사용법
• 라이브러리와 프레임워크의 차이점

반응형 웹사이트 기초

반응형(responsive) 웹사이트란 무엇인가. 무엇에 반응한다는 말인가. 사용자의 환경에 반응한다는 말이다. 스마트폰이 대중화되고 사람들이 사용하는 전자기기의 화면은 크기가 다양해졌다. 스마트폰 같은 작은 화면이 있고 데스크탑 같은 큰 화면이 있으며, 태블릿이나 노트북 같은 중간 크기의 화면도 있다. 디자이너나 개발자 입장에서는 끔찍한 일이다.

현존하는 모든 화면 크기에 대응해서 웹사이트를 만드는 것은 비효율적이다. 그렇기 때문에 반응형 웹사이트를 만들어서 다양한 화면 크기에 대응하려고 하는 것이다. 화면 너비(width)를 기준으로 분류해서 각각의 경우에 웹사이트 구성 요소가 어떻게 배치되는지를 정한다.

웹사이트를 만들 때마다 CSS 파일을 정의하지는 않는 것 같았다. Material UI같은 프레임워크를 사용하거나 Bootstrap, Tailwind 같은 CSS 파일을 불러와서 필요에 맞게 수정해서 사용한다. 이것들을 사용하면 비교적 쉽고 빠르게 웹사이트를 만들 수 있다.

테이블 태그 사용법

어려운 부분이었다. 웹사이트를 직접 만들어보는 경우가 없었지만, 자료를 테이블의 형태로 시각화하는 것은 더욱 드물었기 때문이다. 나중에 교재를 배송받으면 관련된 부분을 자세히 읽어봐야겠다.

라이브러리와 프레임워크의 차이점

두 개념의 차이점에 대해서 깊게 공부한 것은 아니고 강사님이 마지막에 두 개념의 차이를 알고 있냐고 물어보셨다. 차이점이 느껴지기는 했는데, 말로 설명하기가 어려웠다. 인공지능에게 물어보니 라이브러리를 사용할 때는 개발자가 프로그램의 흐름을 제어할 수 있고, 프레임워크를 사용할 때는 개발자는 프로그램의 흐름을 제어할 수 없다고 말했다. 라이브러리는 도구를 제공하는 것이고 프레임워크는 이미 만들어진 것에 빈 칸을 채워나가는 것으로 비유할 수 있다.

결론

반응형 웹사이트는 여전히 아리송하다. 왜 반응형 웹사이트가 필요한지 그리고 어떤 원리로 구현되어 있는지는 대강 알고 있다. 하지만 반응형 웹사이트를 만드는 것은 결코 쉬운 일이 아니다. 개인 프로젝트에 Material UI를 사용하고 있는데, 반응형 웹사이트의 개념을 몰라서 어려워한다기 보다는, 특정 요소를 원하는 곳에 배치하는 것이 익숙하지 않기 때문이다. 도서관에서 UI/UX 관련해서 조언을 주는 책이 있는지 찾아봐야겠다.