스파르타 코딩클럽
내일배움캠프 AI 웹개발자양성과정 2회차
2022.04.28. 9일차- TIL
1. 개인 프로젝트 발제
09:00-10:00
python 게임만들기 개인 프로젝트가 끝나자마자 새로운 프로젝트가 시작되었다. 바로 인스타그램 클론코딩하기. 발제를 들어보니 백엔드나 다른 기능 구현은 제외하고 단순히 UI를 보고 레이아웃을 그대로 코딩하는 프로젝트였다.
2. 단순히 레이아웃만? 쉬울줄 알았는데..
10:00-11:00 반응형 데모
11:00-12:00 프로젝트 설계, 레이아웃 구상, icon 수집
기능적인 부분없이 단순히 레이아웃만 만들면 된다고해서 그렇게 어렵지 않을 것이라고 생각했는데, 막상 시작해보니 고려해야할 점이 많았다. 일단 완성도를 높히고자 반응형으로 만들기로하고 반응형이 어떤 방식으로 작동하는지 데모버전을 만들면서 알아보았다. 그리고 본격적으로 개발하기에 앞서 언제나 그렇듯 내가 이 프로젝트를 통해 무엇을 얻을 것인지를 명확하게 정의해보았다. 여기까지는 별다른 문제가 없었는데 다음부터 뭔가 계속 브레이크가 걸렸다.
뭔지 모르겠는데 코드를 써내려갈 때마다 집중이 안되고 붕뜨는 느낌. 분명히 레이아웃만 구성하면 되는거라 어렵지 않을텐데.. 하면 할수록 진행이 더져지는 것을 느꼈다. 왜이럴까 생각해봤는데 이유는 하나였다. 재미가 없.다.
바로 이전 프로젝트에서 내가 직접 게임을 설계하고 기능들을 구현해나갔던 작업은 스스로 훙미가 있었고 어려워도 이리저리 방법을 찾아보며 재밌게 할 수 있었다. 그런데 이번 프로젝트에서는 단순이 껍데기만 보고 베끼려고 보니 작업이 쉽고 어렵고를 떠나 내 스스로 흥미를 잘 느끼지 못해서 계속 집중을 못했던 것 같다.
3. 그렇다면 다른 재미를 찾아보자!
12:00-13:00 헤더부분 반응형으로 구현
13:00-14:00 점심시간
14:00-15:30 검색창 기능 구현
아 도저히 이대로는 안되겠다 싶은 마음에 다른 재미를 찾아보기로 했다. 단순히 껍데기만 보고 베끼는 것이 아니라 기능들도 한번 구현해보는 것이다. 그래서 제일먼저 검색창 부분을 구현해보기로 했다.
검색창 부분은 마우스로 클릭했을 경우와 안했을 경우 보여지는 부분이 달라진다. 따라서 첫번째로 클릭을 했는지 안했는지 판단해야했고 검색창에 커서를 올린 후 다시 다른 곳을 클릭하면 검색창이 이전 상태로 돌아가도록 만들어야 했다. 이렇게 말로 표현하면 쉬운데 처음 이 기능을 구현하려니 어떻게 접근해야할지 고민이 많았다. 단순히 기능만 적용시키는 것이 아니라 외관상으로 보여지는 부분도 고려해야했기 때문이다. 덕분에 잘몰랐던 javascript 함수들과 이벤트 처리들을 찾아서 적용시켜보고 html의 여러 태그와 css의 설정 요령을 많이 배울 수 있었다. 이제야 좀 할맛나네!!
4. 진정한 재미는 이곳에?!
15:30-21:30 메인 프로필 부분 구현
이 시간이 오늘 개발한 시간 중 하이라이트였다. 바로 메인 포스트 부분 옆의 프로필이 나오는 부분이었는데 중요한 것은 바로 스크롤을 내려도 화면에 고정된다는 점이었다. 고정하는 설정은 어렵지 않았다. 헤더와 마찬가지로 css에서 position: fixed;하면 되니까. 그런데 문제는 이 프로필 박스가 고정되는 위치였다.
헤더는 항상 화면 위에 있기 때문에 top: 0;으로 화면에 고정시킬 수 있었다. 그런데 프로필 박스는 달랐다. 왜냐하면 화면의 사이즈를 변경하면 좌우 너비가 달라지지만 프로필 박스의 위치는 중앙에 고정되어있었기 때문이다. left, right에 고정값으로 화면에 위치시키면 너비가 넓어지면 그만큼 중앙에서 멀어지기 때문에 다른 방법을 찾아봐야했다. 그리고 이 방법을 찾아가는 과정과 머리속으로 구조를 상상하며 고민을 하는 시간이 오늘 하루 중 제일 재밌었다.
처음으로 생각한 방법은 화면 너비와 상관없이 프로필 박스의 위치는 상위 div의 오른쪽 끝에 정렬되어 있기 때문에 상위 div나 다른 div와의 관계로 위치를 정의할 수 있는 지 찾아보았다. 하지만 position을 fixed로 설정하면 다른 relative나 absolute 설정을 추가로 할 수 없었고 정렬도 먹히지 않아서 이 방법으로는 구현할 수 없었다.
다음 방법으로 화면 너비가 넓어져도 화면 중앙에서의 상대적 위치는 같기 때문에 이를 활용할 수 있는 방법을 찾아보았다. 하지만 마찬가지로 적절한 방법은 찾지 못했다.
결국 인스타그램 웹페이지의 화면크기를 변동하면서 해당 부분이 어떻게 변경되는지 확인해보았다. 약간 컨닝하는 느낌이 들긴 했지만 그전에 충분이 고민해보고 방법을 찾아본 것을 위안삼아 힌트를 받는다는 느낌으로 진행했다. 확인해보니 해당 부분은 position: fixed; 설정을 한 것이 맞았다. 하지만 화면 크기가 바뀔 때마다 right의 설정값이 바뀌고 있었다. 즉 화면 크기가 바뀔 때마다 새롭게 위치를 지정해주는 것이었다!
자 이제 힌트는 이 정도로만 하고 다시 내 페이지로 돌아와서 생각해보았다. 화면크기가 바뀔때마다 위치를 다시정해준다... 일단
1) 화면 크기가 바뀌는지 판단하는 함수가 필요했고
2) 바뀌었다면 얼마만큼 위치를 조정해줄 것인지
고려해봐야했다. 방법을 알고나니 다음 작업은 쉬웠다. 화면크기가 변경되는지 체크하는 이벤트 처리는
// 화면 사이즈 변경 시
// profile 마진값 다시 계산
$(window).resize(function() {
update_profile_margin()
});와 같이 할 수 있었고 right값을 설정해주는 방법은 메인 포스트박스가 margin: auto; 설정을 가진 것을 이용하여 메인 포트스박스의 마진값을 가져와서 그만큼 ritght 설정을 해주면 되었다.
// profile 마진값 계산하는 함수
function update_profile_margin() {
let screen_width = $(window).width()
let self_width = $('#main_body').width()
let margin = screen_width - self_width
let margin_right = (margin/2).toString()
let str = margin_right + "px"
$('#profile_box').css("right", str)
}
5. 느낀점
확실히 오늘 느낀바로는 나는 하는 일이 쉽고 어렵고를 떠나서 내 스스로 재미를 느끼거나 확실한 동기부여가 되어야지만 잘 할 수 있는 듯 하다.
그리고 내가 개발을 하면서 재미를 느끼는 부분은 뭔가 눈에 보이는 결과물을 만들어 내는 것보다 구조적으로 내 스스로 생각하고 기능을 구현하는 부분인 것 같다.
하지만 앞으로 계속 내가 재밌어하고 좋아하는 것만 개발할 수 는 없을 것이다. 흥미를 느끼지 못하는 경우도 생길 텐데 그때마다 오늘을 떠올리려서 극복해야겠다.
