첫 프로젝트

계속 기존에 짜여있던 코드에 이미지만 수정하면 되는 유지보수만 했었는데 처음으로 애니메이션 효과를 넣은 팝업창 구현하는 프로젝트를 맡게 됐다.

 

사실 처음에는 원래 담당하시던 분이 휴가가셔서 그동안 한번 해보라고 하셨던건데 그럴싸해보였는지 디벨롭하면서 진행해보라고 하셨다.

그렇게 모션은 일단 어떻게든 구현했는데 반응형이 문제였다.

 

이미지 배경에 맞춰서 모션작업이 들어간거라 스크린 크기에 따라 달라지는 이미지에 맞추어 효과를 넣는게 어려웠다.
그리고 모바일 기기가 워낙 다양해서 높이값에 따라 어그러지는 부분이 많았다.

 

새삼 html 구조도 진짜 중요하고 css도 어렵다는걸 많이 깨달았다.

정적인 단일페이지라서 js없이 거의 css 애니메이션만 이용했는데 모든 기기에 맞추어 작업하는게 정말 어려웠다.

그리고 실무작업과 혼자 연습할 때의 가장 큰 차이점은 내마음대로 하지 못한다는 것..
혼자 할 때는 하다가 안될 것 같으면 다른 방식으로 바꿔서 진행했는데 실무에서는 이미 정해진 시안이 있으니 죽이되든 밥이되든 그대로 구현해야만 한다.

덕분에? 알게모르게 실력이 향상될 수 있는 것 같다.

 

이번에도 태블릿에서 레이아웃이 깨지는 이슈가 있어서 사수분께서는 보통 어떻게 작업하시는지, img 속성에 대해서도 알 수 있었다.

 

이번에 내가 가장 크게 배운 건 이미지 태그는 비율이 정해져있어서 가로, 세로 둘 중 한 개의 값만 지정해줘도 영역이 잡힌다는 사실이었다.

그동안은 이런거 생각하고 해본 적이 없었다.

그리고 대부분 background-image를 이용해서 배경에 이미지를 넣고 cover로 채우는 방식으로 작업했다.

이미지의 비율이 중요했던 적이 없었기때문에..

하지만 막상 실무작업을 하다보니 디자인 시안이 가장 중요하고, 동일하게 보이기 위해선 이미지 고유의 비율이 유지되어야 했다.

그러기위해선 배경이미지가 아닌 img태그를 이용한 구조가 필요하다.

 

이번 작업에서도 처음에 내가 짰던 코드에는 대부분 background-image를 이용해 이미지를 넣었었지만 반응형 작업을 용이하게 하기 위해 img태그를 사용하는 것으로 수정했고, 해당 이미지의 영역이 필요해서 script를 이용해 이미지 width값을 가져와 root속성에 넣어 부모 가로값을 설정해주었다.

(이건 사실 사수분께서 해주신 부분.. 나는 나름 분기점도 나누면서 이것저것 작업해보았지만 모든 기기에 대응하기가 어려웠는데 script를 이용하니 영역이 바로 잡혔다. 100vh 대응할때 innerHeight 값 가져왔던 코드에서 세로값을 가로값으로 바꿨을뿐 완전 같은 코드인건데 이 생각을 못하다니! 왠지 분했다. 그래도 이번에 이렇게 배웠으니 다음엔 좀 더 잘 할 수 있겠지..?)