재미있는 것을 해야 하는 법이다.
다른 IT교육과정들을 살펴 보니 비전공자도 실무를 잡으려면 프론트앤드건 백앤드건 6개월을 잡는다. BEB에서 2개월만에 1년을 파야하는 범위를 지나가버렸다. 지나간 과정에도 코드한 줄 기억나지 않는다는 자괴감에서 살아남기 위해서 필요한 것은 흥미 위주의 프로젝트이다. 지난 교육에서 배웠던 내용들을 모두 사용할 수 있는 프로젝트로 내가 가장 재미있게 만들 수 있는 방법으로 진행 해 본다.
목표
Crypto Derivatives Market에서 API로
Bitcoin Future & Option의 데이터를 받아 실시간 스프레드 분석하여
상품별 Market Timing 평가
=> 실시간 유효한 상품과 행사가를 출력하는 웹앱 제작
디자인 위주로 시작 HTML/CSS/JS
비루한 실력이라도 흥미있는 것 부터 한다. 재미없으면 안 한다.
원하는 퀄리티의 웹앱 나올 때 까지 리팩토링
VBA로 Vertual Derivatives Market 완성했던 순간을 기억하자.
닿을 때 까지 만들다 보면 어떻게든 만들어지고, 나는 성장한다.
tradingView API를 통해 실전에 사용되는 데이터를 다루는 웹앱 운영
여기까지 도달할 수 있으면 2단계. 여기에 AI 솔루션 연동시키면 3단계 도달로 준비 해 두었던 프로젝트 완료다. 트레이딩 분석에 적합한 AI모델 찾을 때가 더 쉬웠던 것 같다. 흥미없지만 필요한 기능을 내 것으로 만드는 게 어렵다. 먼 길 돌아간다. 그렇게 언젠가는 닿는다.
반응형 웹
미디어 쿼리로 width크기에 따라 각 영역이 바람직한 비율로 구성되도록 했다.
시행착오 겪으면서 CSS가 익숙해 졌다. 역시 만들어 봐야 그 맛을 알지.
루트 설정으로 수정에 용이하게 초기설정 하는 것, 호버, 포지션 앱솔루트, 디스플레이 플렉스, 클램프, 트렌잭션 트렌스폼, 트렌스폼 로테이트, 비디오, 플렉스 비율 등을 살펴 보았다.
반응형 웹
반응형 웹은 다양한 디바이스와 다양한 크기의 화면에서 일관되게 잘 작동하는 웹 페이지를 제작하는 일이다.
주요 내용
-
소비자가 어떤 디바이스를 이용하든 시각적으로 아름답고 기능적이며 사용성이 높다.
-
사용자는 하루에도 몇 번씩 다양한 디바이스를 오간다.
다양한 디바이스에서 사이트에 접속했을 때 사이트가 느려지거나 둘러보기 어렵거나 시각적으로 아름답지 않으면 소비자는 금세 관심을 잃어버린다. -
각 구성 요소의 차원에서 반응형 디자인과 기능을 고민해야 하고, 반응성을 높일 수 있는 디자인 프로세스와 시스템이 필요하다.
반응형 웹 사이트는 고객 경험을 최적화하고 사이트 성능을 높이는 기회가 된다. 사이트의 반응성이 증가하면, 이탈률이 감소한다. 그리고 다양한 뷰포인트와 다양한 고객의 사용 패턴에 맞게 최적화할 수 있어 고객 참여 증가한다.
반응형 웹의 이점
반응형 웹디자인은 고객에게도 혜택을 준다. 브랜드가 고객의 디바이스와 니즈를 고려하기 때문. 예를 들어 직장에서 데스크탑 컴퓨터로 풍부한 인터랙티브 경험을 즐기고, 이후 모바일 디바이스로 빠른 페이지 로드와 작은 화면에 최적화된 터치 인터페이스를 경험한다.
출처 : 반응형 웹
실습내용
이틀 간 페이지 만들며,
다음과 같은 내용이 기억에 남는다.
root
루트를 상위에 설정하여 전체적인 디자인 수정에 용이하게 설정할 수 있다.
반복적으로 설정해야하는 요소들이 있는데 루트를 설정하고 var()를 통해 지정한 내용을 사용할 수 있다. 같은 요소들로 설정 해 놓고 그 요소들을 한 번에 수정할 수 있다는 장점이 있다.
:root {
/* Color */
--white-color: #fff;
--black-color: #000000;
--Primary-color:#93CEE3;
--onPrimary-color:#013542;
--Primary-Container-color:#004E5F;
--onPrimary-Container-color:#AFEBFF;
--Secondary-color:#BBC9CD;
--onSecondary-color:#253236;
--Secondary-Container-color:#3C494D;
--onSecondary-Container-color:#D7E5E9;
--grey-dark-color: #434749;
--grey-light-color: #C3C7C9;
/* Size */
--padding: 10px;
--avatar-size:48px;
/* Font Size */
--font-large: 24px;
--font-midium: 14px;
--font-small: 12px;
--font-micro: 10px;
}
...
header{
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px var(--padding);
background-color: var(--white-color);
color: var(--black-color)
그리고 position: sticky 는 상위에 해당 요소를 고정해 주는 역할을 한다.
상단의 기준이 있어야 하기에 top: 0;으로 설정할 수 있다.
display: flex
웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용한다. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있다. 그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 퍼블리싱이 가능하다.
hover
호버는 다음과 같이 효과를 주고자 하는 대상 뒤에 :hover를 붙여줌으로 커서가 위에 있는 것을 인식하여 반응할 수 있도록 해준다.
header .menu ul li:hover{
background-color: var(--Primary-color);
color: var(--white-color);
border-radius: 5px;
}position: absolute
절대값으로 대상을 해당 위치에 고정시킨다.
header .toggleButton{
text-decoration: none;
display: none;
position: absolute;
font-size: 24px;
top: 14px;
right: 0px;
color: var(--onPrimary-color);
}clamp
클램프는 텍스트의 내용이 초과 될 경우 그 줄을 제한할 수 있다.
.info .metadata .titleAndButton .title.clamp{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}transition: transform, transform: rotate()
클램프로 숨겨 둔 내용을 보여주는 moreButton 구현에서 썼다.
단순하지만 동적으로 화살표가 위 아래로 회전할 수 있도록 했다.
transition은 전환 속도 곡선 지정을 통해 수학적으로 대상을 전환시킬 수 있다.
transition-timing-function 속성은 속도 곡선을 지정한다.
ease 느린 시작, 빠르게 시작, 느리게 종료하는 전환 효과를 지정(기본값).
linear 처음부터 끝까지 동일한 속도로 전환 효과를 지정
ease-in 느린 시작으로 전환 효과 지정
ease-out 느린 끝으로 전환 효과를 지정
ease-in-out 느린 시작과 끝으로 전환 효과 지정
cubic-bezier(n,n,n,n) 큐빅-베지어 함수에서 자신만의 값을 정의
Interactive Developer 실습을 했을 사용했던 효과이기에 이해하기 쉬웠다.
.info .metadata .titleAndButton .moreButton{
height: 100%;
transition: transform 300ms ease-in-out;
}
.info .metadata .titleAndButton .moreButton.clicked{
transform: rotate(180deg);
}애플 홈페이지에 적용되었던 효과들이 플레이타임을 높이 값에 연동시켜 섬세하게 컨트롤한 것인가. 비디오 태그를 다루는 것에 좀 더 익숙해 질 수 있도록 하자.
flex
플렉스에 따라서 해당 비율로 설정할 수 있다.
.upNext .item .video{
flex: 1 1 35%;
margin-right: var(--padding);
min-width: 180px;
min-height: 100px;
}
.upNext .item .info1{
flex-direction: column;
flex: 1 1 60%;
}
.upNext .item .moreButton{
height: 100%;
flex: 1 1 5%;
}그리고 그 다음
유효성검사를 복습한다. DOM을 다루는 것을 살펴보자
그 다음은 마음에 들지 않는 푸터를 없애버리고 리액트를 다뤄봐야겠다.
Up Next에 infinite scroll 할 수 있고, 각 게시물에 데이터에
좋아요, 싫어요, 공유 저장 기능들을 활성화 할 수 있도록 만들어 보자.
이 작업까지는 서버가 필요 없도록 더미데이터를 활용하겠지만 올 해 안으로
서버까지 자유롭게 다룰 수 있도록 해야 한다. 웹 개발 A to Z 위해 다분히 손을 놀리자.
