[ 후기 ]2022 랜드스케이프 개발

예리에르·2023년 2월 3일
53

Frontend

목록 보기
6/10
post-thumbnail

개발한 랜드스케이프가 궁금하다면 여기를 방문해주세용
⭐🌟 https://bit.ly/3HrHRG3 🌟⭐

개발 동기

2022년이 끝나고 새해가 시작하면서 회사에서 2022년 데이터를 분석한 랜드스케이프 개발 요청이 들어왔다. 2021년 7월에 입사해 1년 6개월이 지난 시점에서 팀장님께서 혼자 개발을 진행해보라고 하셨다. 많이 배우고 있지만 스스로 개발했다라고 말할 포트폴리오가 부족하다고 생각했는데 반가운 소식이었다. 최대한 팀원의 도움을 받지 않고 스스로 개발하기 위해 1월 한달간 열심히 개발을 진행했다.

개발

1. 개발 준비

기획이 완성되고 디자인이 완성되기까지 개발시작은 멈춰있었는데 짧은 워킹데이로 미리 디자이너분께 필요한 애니메이션에 대해 전달 받았다.
애니매이션을 개발한 경험이 부족했기 때문에 기존에 개발된 여러 서비스의 연말결산을 많이 참고하였다.

개인 노션에 목업으로 받은 이미지에 필요한 액션과 레퍼런스로 사용할 사이트링크를 저장했다.

레퍼런스를 통해 다양한 css 지식과 애니메이션 지식을 고도화 할수 있었다. 특히 네이버의 다양한 연말결산 페이지를 분석했는데 다른 회사는 어떻게 HTML을 설계하는지 엿볼수 있는 좋은 기회였다.

가장 많은 시간이 걸렸던 컴포넌트는 밑에서 위로 올라오는 카드였다. 차트 만들었던 기억을 떠올려 밑에서 커지는 네모는 잘 만들었다. 펴졌던 카드가 접히면서 다른 카드가 펴질때 스크롤이 내려가는 문제가 있었다. 여러 시행착오 끝에 height가 커지고 작아질 때 해당 영역이 갑자기 사라지는 공백의 문제가 있었고 transition 의 속도를 같이 주어 공백의 문제를 해결하였다.

        &.close {
            > .content {
                height: 0;
                transition: height .5s ease-in-out;
                overflow: hidden;
            }
        }

        &.open {
            > .content {
                transition: height .5s ease-in-out;
                overflow: hidden;
            }
        }

프로젝트를 바닥부터 설계하면서 전역스타일도 설정했는데. 기존에 설정되었던 margin,padding에 대한 소중함도 알게되었다. 직접 글꼴설정, 색깔설정을 하면서 스타일 설정의 중요성을 알았다. width와 height에서 100%를 사용할때는 부모요소의 사이즈가 명확하게 명시되어야 하는 사실도 알게되면서

습관적으로 개발하면서 놓쳤던 지식을 보충할 수 있었다.

2. 개발 시작

1) 일정산정과 추가작업

워킹데이는 3주가 되지 않았다. 여기서 또 문제는 개발이 끝난뒤 QA기간이 필요한데 그러기 위해서는 일정산정을 할 줄 알아야했다. 하지만 항상 팀장님이 해주셨던 개발일정에 익숙해 있던 터라 스스로 개발실력을 분석하고 디자인을 보고 일정을 산정하기가 어려웠다.

하지만 스스로의 힘으로 개발을 끝내겠다고 마음을 먹었던 터라 스스로 목표를 세우고 그 기간안에 끝내기 위해 많은 노력을 했다.

많은 개발자들이 야근을 하는 경우가 많지만 현재회사는 야근을 지양하는 문화를 가지고있기 때문에 한번도 야근을 해본적이 없다.
(6시 신데렐라처럼 6떙! 칼퇴를 했었다... ㅎㅎㅎ🤩)

이번작업은 스스로 책임감을 많이 느끼고있었기 때문에 회사는 칼퇴했지만 운동을 끝내고 집에서 추가작업을 몰래몰래 했다. ㅎㅎㅎ
퇴근 후 자리에 앉기는 정말정말~~ 싫었지만 스스로 다 해냈다를 보여주고 싶은 욕심에 자리에 앉았다. 목표했던 개발을 끝내면 그 뿌듯함은 엄청났다.😎😎

2) 모바일 대응

작은 차트 컴포넌트의 모바일대응은 해본적이 있지만 다양한 특성을 가진 전체 페이지의 모바일 대응은 처음이었다. 처음 목적은 웹으로 들어오는 이용자가 주 타겟이었지만 앱 광고를 통해 모바일 이용자 또한 중요한 타겟으로 세세한 작업이 요해졌다.

지금까지 웹 개발의 event만 생각했었는데 모바일 입장에서 event는 생각보다 달랐다. 마우스와 터치패드를 모두 생각하는 개발이 어려웠다.
특히 웹에서 hover는 마우스가 요소 위에 올라가는 것만 생각했다. 그래서 마우스가 요소를 벗어나면 자연스럽게 hover 스타일이 나타나지 않았다.

스마트폰과 태블릿과 같은 터치 디바이스에서는 PC와 다르게 hover가 적용되지 않았다.
많이 사용했던

a:hover {
  background-color: skyblue;
}

모바일 기기에서는 클릭시 잠깐 hover처리가 된다.

이런 경우에는

@media (hover: hover) {
  a:hover {
    background-color: skyblue;
  }
}

를 통해 hover가 가능한 경우에만 스타일이 적용될 수잇게 할수 있다. pc에서는잘 작동하지만 모바일에서는 이루어지지 않는다.

모바일에서 클릭하면 파란색 박스의 하이라이트가 생기는 경우도 있었다. 이런경우는

-webkit-tap-highlight-color :transparent

를 통해 해결했다.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

3) 이미지 비율에 맞게 컴포넌트 width,height 조정

요소의 width, height 는 rem으로 모바일 대응을 하였다. 하지만 이미지 크기는 고정되어있고 1대1도 아니며 픽셀이 깨지지도 않아야 하다보니 이미지의 가로세로비가 기준이 되어야했다. 요소안에 이미지를 넣는 방법에 익숙했던 나는 이 부분에서 조금 해메게 되었다. background-size: ; 를 사용해 어떻게 해결해보려고했지만 생각했던 개발 방향과 달랐다.

aspect-ratio(종횡비)를 통해 특정 비율대로 크기를 조정할 수 있는 방법을 사용했다.

사용방법은
width/height 비율을 지정하는 쉬운 방법이다.

내가 전달 받은 이미지의 비율은 가로 23, 새로 14 비율의 이미지였다.

  > .ecommerce-cards {
        position: relative;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        aspect-ratio: 23/14;
        cursor: pointer;
        @media only screen and (min-width: 800px) {
            height: 26.25rem;
        }
        @media only screen and (max-width: 799px) {
            width: calc(100% - 2.5rem);
        }
    }

이렇게 적용하였다. 모바일 기준인 800px 전까지는 width,height 모두 지정하여 비율을 따르지 않게 하였다.

그보다 작을때는 하나만 지정하여 이미지 너비에 맞게 요소 사이즈를 조정하였다.

느낀점

실력이 좋지 않다고 생각하며 자신감이 부족했는데 처음부터 끝까지 혼자 맡아 진행하면서 자신감이 생겼다. 원하는 컴포넌트를 마주했을 때 막연한 두려움이 아닌 새로운 도전으로 받아 들일수있는 눈을 키울수있는 좋은 기회였다.

다양한 컨퍼런스에서 대부분의 개발자들이 컴포넌트 개발에서 나아가 시스템에 대한 고민을 많이하고 이야기를 나누는 모습을 봤다. 전에는 잘 이해하지 못했지만 시스템의 중요성에 공감할 수 있게 되었다.

아직 배포와 세션에 관한 내용을 깊게 알지 못하고 팀원의 힘을 빌렸지만 점차 개발 영역을 넓혀가면서 직접 배포하고 사업에서 요구하는 요구사항을 구현하는 실력까지 높이고 싶다. ㅎㅎㅎ 🤭🤭💪🤭

참고

https://choi-jinwoo.github.io/post/development/css-media-hover/

profile
비전공 프론트엔드 개발자의 개발일기😈 ✍️

8개의 댓글

comment-user-thumbnail
2023년 2월 3일

너무너무 멋집니다아 당신은 최고의 개발자예용

1개의 답글
comment-user-thumbnail
2023년 2월 3일

퀄리티가 넘 좋은 걸요? 같은 주니어 개발자로서 이런 알찬 일지 넘 멋있습니다. 화이팅!

1개의 답글
comment-user-thumbnail
2023년 2월 3일

와 역시.. 최고의 개발자님! 판을 뒤집어놓으셨다

1개의 답글
comment-user-thumbnail
2023년 2월 8일

좋은글 감사합니다!

1개의 답글