---

과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권34 트위치1_210612(1/2)
주제 : html / css

---

트위치 페이지 카피

트위치 페이지에서 눈에 띄는 점은 왼쪽 영역이다. 일반적인 트위치의 컨텐츠가 배치되는 영역과 별개로 스크롤이 적용되어 있어 독립적으로 느껴졌고 트위치라는 플렛폼 사이트의 특성에 잘 맞는 영역이라 생각한다.

추천채널 메뉴는 왼쪽 영역의 핵심적인 부분으로, 사용자들이 소모하는 컨텐츠의 연속성을 제공한다. 내가 보는 방송에 흥미가 떨어지거나 종료되더라도 플렛폼을 벗어나지 않을 수 있는 다른 대안 컨텐츠를 제공하는 역활을 수행다고 생각한다.

포털과 같이 정보를 제공하는 사이트도 트래픽을 유지하는 것이 중요하겠지만 트위치와 같이 체류시간이 수익과 비례하는 구조라면, 제공하는 서비스 만큼이나 사람들을 머물게 하는 것이 중요할 것이다.

<div class="main-container">
		
	<div class="left-area">
				
		<div class="channel-wrap">
			<div class="channel-header">
				<h3>추천채널</h3>
				<i class="icon-arrow"></i>
			</div>
			<div class="channel-body">
				<ul>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/30">
							<div class="txt-wrap">
								<h4>기발자(gi_balja)</h4>
								<span class="source">Just Chatting</span>
							</div>
							<span class="count">10,000</span>
						</a>
					</li>

.main-container {
	width: 100%;
	min-width: 1340px;
	/*padding-top: 50px;*/
}

컨텐츠 영역이 담기는 메인 영역에는 min-width: 1340px;속성값이 적용되었다. 이전에 상단의 nav태그에도 같은 속성이 적용되었는데 브라우저 크기에 따라 맞춰지며 일정 넓이 이상에서는 고정이 되도록 설정했다. 브라우저의 크기를 조절하는 상황에서 레이아웃의 배치가 안정적으로 되었다.

.left-area {
	position: fixed;
	width: 240px;
	background-color: #202024;

	top: 50px;
	bottom: 0;
	left: 0;

	overflow-y: auto;
}

오늘 작업한 왼쪽 영역, .left-area에는 position:fixed ; 그리고 top: 50px;, bottom: 0;, left: 0;으로 속성이 적용되었다. 추천 채널이 담긴 왼쪽 영역은 브라우저에 항상고정되어 있지만 3차원 속성의 배치를 통해 높이값이 height: 100%;값과 같이 브라우저의 크기에 따라 늘어나고 overflow-y: auto;로 스크롤을 적용, 마치 독립적인 영역으로 느껴지도록 공간이 완성되었다.

position: fixed;속성을 이해할 때, 단순히 오브젝트를 팝업창과 같이 만들어 준다고 생각했다. 속성의 영역을 넓히고 다른 기능을 추가하니 fixed는 말그대로 오브젝트를 독립시키는 기능을 수행한다는 것이 느껴졌다.

---

---

Review

한가지 프로젝트에도 여러 분야의 지식과 기술이 필요하듯 웹 개발도 여러 분야가 필요하다고 느꼈다. 디자인과 기능의 구현 그리고 웹 페이지의 목적과 특성에 맞는 기획 등, 제공하는 제품, 컨텐츠, 서비스들의 품질은 물론 제공하는 방식과 편의성까지 많은 부분들이 고려되어야 비로서 완성되는 분야인것 같다.

쫍게는 코딩역량이겠지만 큰 프로젝트 일수록 다양한 분야에 대한 지식과 경험을 필요하겠다.