쿠킷 기술블로그

부트스트랩이란

웹 페이지도 트렌드가 있다. 스마트 폰과 태블릿이 보편화되면서 반응형 웹페이지 붐이 불었었다. 물론 지금은 심미적인 측면을 더 강조하여 모바일전용과 컴퓨터전용 두개를 따로 만드는 경향이 강한 것 같다. 그러나 여전히 반응형웹은 한번의 개발로 여러 디바이스를 지원할 수 있다는 점에서 많은 개발자들에게 각광을 받고 있다.

- 반응형 웹, 프레임워크?

 웹 개발을 위한 컴포넌트를 제공해주는 것을 프레임워크라고 한다. 프레임워크의 종류로는 드림위버, 부트스트랩, 워드프레스 등이 있다. 드림위버는 무거운 편에 속하기 때문에 부트스트랩을 통해 가볍고 빠른 반응형 웹 제작에 대해 공부해보겠다. 

1. 반응형 웹이란

1.1 레이아웃

  텍스트나 그림 등과 같은 콘텐치의 배치를 어떻게 하여 효과적으로 전달할 지에 관한 것으로 이를 영역으로 나눠 표현할 것을 레이아웃이라고 한다. 

예를 들어, 블로그를 디자인한다면 검색창은 브라우저 박스에 사이트의 타이틀은 헤더에, 좌, 우측 사이트 바에는 광고를, 가운데에는 글을 집어넣는 식으로 배치를 할 수 있다. 

  # 레이아웃의 종류

   1) 고정형 : 해상도를 높여 창을 풀로 키우면 흰 여백이 보인다.

   ex) 네이버

   2) 반응형 : 해상도가 바뀌더라도 컨텐츠가 항상 화면에 꽉차게 나온다.

   ex) 구글

1.2 반응형 웹이란

 3S(TV Screen, Computer Screen, Cell phone Screen) 에서 벗어난 N 스크린 시대가 도래하면서 반응형 웹에 대한 기술의 필요성이 대두되었다. 

PC용 버전 웹을 모바일 디바이스에서 열면 꽉한 화면 글씨가 깨알 같이 적혀있는 것을 볼 수 있다. 그래서 많은 사이트들이 모바일버전의 웹사이트를 별도로 지원하고 있다. 그러나 디바이스 타입별로(Ex 스마트폰, 태블릿, 컴퓨터 용) 다 각각 개발하는 것은 개발 비용에 대한 부담이 큰 것이 사실이다.

이를 위해 한번의 구축으로 다양한 해상도를 지원하는 반응형 웹을 구현할 수 있는 기술이 탄생했다. 바로 반응형 웹이다. 모든 기기의 스크린에 적합한 웹 사이트를 제공하는 것이다.

기술적 관점에서 재정의하면,

반응형 웹이란(Responsive Web) 표준화된 하나의 html파일을 사용하여 서로 다른 해상도를 가진 기기의 브라우저에서 브라우저의 너비에 따라 유동적으로 화면의 배치가 조정되는 기술이다.

2. 부트스트랩

2.1 부트스트랩의 탄생

트위터에서 근무하는 두 명의 엔지니어가 합작해 만든 HTML5와 CSS3, Javascript 기반의 사용자 UI 프레임워크이다.

- 장점 : CSS3을 몰라도 쉽게 UI를 구현할 수 있는 UI 컴포넌트를 제공한다.

2.2 부트스트랩의 다운로드

 일반 설치 버전 혹은 사용자 커스토마이징 버전을 다운로드 받아, 찾기 간편하게 C 드라이브에 압축을 풀 것을 권장한다. 

 2.2.1 일반 설치

  처음 부트스트랩을 사용해보는 사람들은 다음의 설치를 할 것을 강하게 추천한다.

  - URL : http://bootstrapk.com/getting-started/

  - 다운로드 :  아래와 같이 부트스트랩 다운로드를 클릭

  1) 다운로드

2) 다운로드 받은 파일을 C드라이브에 압축풀기

( 개발할 프로젝트의 경로에 압축을 푼 부트스트랩 폴더가 있어야 한다. 이 글의 경우, 경로를 쉽게 하기 위해 C:\ 에서 바로 개발을 할 예정이다. bootstrap 압축파일을 C에 풀었다. )

 2.2.2 사용자설치(=customize)

   자신이 원하는 것을 골라서 설치할 수 있다는 장점이 있다. 부트스트랩을 써본 사람들이 입맛에 따라 +, -를 할 수 있다.

   URL : http://bootstrapk.com/customize/

 2.2.3 로컬이 아닌 CDN을 이용

  사용자의 로컬폴더나 프로젝트의 서버에 별도로 부트스트랩을 올려 사용하는 방식이 아니라 부트스트랩을 운영하는 서버의 링크를 통해 리소스를 받아오는 방식이다. 따라서 위처럼 압축을 풀 필요가 없다. 하지만 2.21과 같이 처음 공부할 때는 로컬서버를 통해 먼저 테스트하고 공부할 것을 추천하는 바이다.

3. 참고 - 부트스트랩의 구조

위의 사진에서 보앗듯 bootstrap 폴더의 구조는 크게 css, js, fonts로 분류 되어져 있다. 각각의 폴더는 다음과 같은 이미 컴파일 된 파일을 가지고 있다.

bootstrap/

├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

추가적으로 css에 대해서 살펴보자면,

  디자인 파일로 웹 브라우저에서 웹 페이지를 열면 불러오는 시간을 줄이기 위해 용량이 작은 bootstrap.css보다 bootstrap.min을 지원한다. 사용자는 최소의 사이트를 만들때 bootstrap.min을 참조하게끔하여 페이지를 로딩할 수 있다  참고적으로 min 파일은 띄워쓰기 등을 없애 파일의 크기를 압축한 것이다. theme 파일은 반응형을 지원하는 파일이다.

일상/제안/선택 고민이 될 때 consider / think about / think of 

일상에서 아래와 같은 대화는 정말 많이 쓰인다.

M : 너 이거 할거야?

W : 아니 나 아직 고민 중이야.

어떤 상황에서 consider / think about / think of 를 쓸 수 있는 지에 대해 알아보자.

1. Consider

"고려하다, ~로 생각하다(~로 여기다, 간주하다), 오래 생각하다"라는 뜻으로 이번 글에서는 고려하다, 오래 생각하다로 쓰일 때의 consider에 대해 알아보겠다. "나 그것을 할지 아직 고민 중이야"를 영어로 표현하면

I am still considering to do it. 으로 표현할 수 있다.

정확히 말하자면 ~을 할지 고려중이다. 라는 뜻이다. 참고적으로 고려한다 라는 동사의 의미는 무엇을 할지 말지 생각해보겠다는 말이다.

.

다음 상황을 살펴보자.

M : Which car do you buy? the red one or blue one?

W : Hum, I am considering whether to buy a red one or not. 

M:  어떤 차를 살거야? 빨간 차? 파란차?

W: 음, 나 빨간 차를 살지 말지 고민 중이야.(= 빨간 차를 살지 말지 고려중이야..)

즉, 일반적으로 consider는 결정을 내리기 전에 갈등이 일어나 고려가 필요할 때 쓰인 다는 것을 알 수 있다. 다음의 문장을 읽어보자.

 To consider means you are thinking about something that requires you to come to a decision, for example, you have to 'consider' or 'think over' weather to have a red car or a blue one.

빨간 차를 살지 파란 색 차를 살지 고민이 될 때, 즉 선택의 상황에 갈등이 와서 결정을 하기엔 오래 생각을 해야할 때 쓰이는 동사임을 알 수 있다.

즉, consider = think over와 같은 의미를 가진다. 어떤 것에 대해 또는 어떤 행위를 하기 위해, 골똘히 또는 곰곰히 생각하며 고려를 하고 있다는 뜻이 내포된 표현. 다만 아름다운 번역을 위해 고려중일 때 고민중이라고 표현하는 것이 좋다.

 나 진로 변경을 할까 심각하게 고민 중이야. ( = 진로 변경을 심히 고려 중이야)

 I need some time to consider. 

 깊이 생각할( 숙고할 ) 시간이 필요해요. ( = (어떤 결정에 대해) 고려할 시간이 좀 필요합니다. )

 He was considering what to do next. 

2. Think about

think about은 어떤 것에 대해 순수하게 '생각'해본다는 뜻으로

think about을 통해 정말 순수하게 고민에 빠진 것, "고민 중"을 표현할 수 있다. 

바로 think 와 about 사이에 a lot 을 넣은 것. ' 많이 생각한다 = 고민한다 ' 이기 때문이다.

M : Which car do you buy? the red one or blue one?

W : Hum, I think a lot about this. 

M:  어떤 차를 살거야? 빨간 차? 파란차?

W: 음, 나 빨간 차를 살지 말지 고민 중이야.(= 빨간 차를 살지 말지 고려중이야..)

To 'think about' means that you can simply be thinking about anything - with or without having to make a final decision, for example, you can 'think about' owning a red car one day maybe.

따라서 단순히 생각하는 것을 많이 하면 심히 골똘히 생각하는 것이 되기 때문에

 I need to think a lot about it. 그거에 대해 많이([한국어 어감으로]깊이) 생각해봐야겠어. 를 I need to consider it으로 바꾸어도 어색하지 않다.

추가 표현 ) 

이와 비슷한 표현으로 put a lot of thought into ~ing 이 있다.

I put a lot of thought into deciding the color of a car. 

차의 색을 선택하는데 고민이 되었어.

2. Think of

사실 공부를 하다보면 think about 보다 think of를 접할 일이 훨씬 더 많은 것 같다.

think of 는 '떠올리다'라는 의미로 사용되며 사람에 대한 의견, 또는 상상을 할 때 많이 쓰인다.

다음 예문을 보자.

What do you think of his new novel? 그의 새 소설이 어때?

I can't really think of the appropriate answer. 적절한 답을 떠올릴 수가 없어.