본문 바로가기
카테고리 없음

실무로 느껴지는 나의 부족함 : 완성도, 디테일

by Naker 2022. 4. 20.

실무로 알아보는 나

프론트엔드 개발자로 취직한 지 3개월이 조금 넘는 시점에, 회사에서 사용할 웹 페이지를 만드는 업무를 맡게 됐습니다. 디자이너분께서 만들어주신 디자인과 간단한 프로토타입을 제공받아서 React를 활용한 웹 페이지를 만드는 작업이었습니다.

많은 디테일들과 애니메이션 구상 자체는 팀원분들이 많이 도와주셨지만, 개발 자체는 단독으로 맡은 프로젝트였기 때문에 퍼포먼스에 문제가 없게 잘 짜고 싶다는 욕심이 들게 되는 프로젝트였습니다.

본격적인 틀을 잡아나가기까지

여태 만들어온 웹 사이트들은 간단한 프로젝트로서, 공부를 하기 위해 제작된 웹 사이트인 경우가 많았습니다. 하지만 회사에서 진행하는 프로젝트는 실제로 사람들이 이용해야 할 페이지를 만들어 보는 일이었기 때문에 걱정과 기대를 동시에 안고 프로젝트를 시작하게 됐습니다. 프로젝트 시작과 동시에 디자인 파일을 보고, 어떤 식으로 React 폴더 구조와 컴포넌트들을 만들어야 할지 생각하기 시작했습니다. 평소 같으면 최대한 눈에 보이는 대로 구조를 짜도 됐지만, 회사에서 추구하는 웹 사이트는 간단하고 정적인 웹 사이트가 아닌 사용자의 시선을 가져올 수 있는 동적인 페이지를 추구했습니다. 그렇기 때문에 나중에 어떤 애니메이션을 넣어야 할지도 생각을 해야 했고, 평소에 작업하던 방식과는 조금 다르게 컴포넌트들을 작성해야 했습니다.

평소와 다르게 구조를 잡아야 한다는 사실을 알고 있었음에도 한 번에 구조를 잡는 것은 쉬운 일이 아니었습니다. 특히 애니메이션을 개발할 때에 많은 시행착오가 있었는데요. 웹 사이트의 구조를 잡고 스타일링까지 마친 상태에서, 애니메이션을 더하고자 하니 예상치 못한 문제점들이 되었고, 결국 스타일과 구조 모두를 갈아엎기도 했습니다. 그렇게 겨우겨우 애니메이션을 추가할 수 있는 구조로 갈아엎고 본격적으로 애니메이션 작업에 착수했습니다.

0.1초가 이렇게 다르다니

본격적인 애니메이션 작업에 들어가면서, 전체적인 애니메이션의 분위기는 디자인 파일을 고려해서 직접 추가하기 시작했습니다. 하지만 직접 구상한 애니메이션은 단조롭고 리듬감이 없어서 재미가 없었고, 결국 팀원분들께 얻은 수많은 조언 끝에 애니메이션을 완성해 나갈 수 있었습니다.

수많은 조언들을 들으면서 스스로의 부족함을 찾아낼 수 있는 기회를 얻을 수 있었습니다. 평소 같았으면 디자인 파일과 똑같이 생긴 웹 페이지를 보고 만족했겠지만, 정작 만들어진 웹 사이트에 어울리는 애니메이션을 찾아내지 못했습니다. 더군다나 그 애니메이션들끼리의 0.1초, 0.01초 정도의 미세한 타이밍들을 조정해서 완성도 높은 애니메이션을 만들기 위해 아직 도움이 필요하다는 점에서 더욱 분발하자는 생각이 들었습니다.

스타일링도 아직 부족하다

애니메이션에 대해 부족한 점은 개발 시작 직전부터 이미 인지하고 있던 부분이었습니다. 하지만 스타일링은 어느 정도 자신이 있었고, 반응형 또한 유연하게 대처할 수 있다고 생각을 했습니다. 하지만 스타일링 역시, 부족한 부분이 많은 점을 이번 프로젝트를 통해 느낄 수 있었죠. 우선 디자인과 같은 해상도에서 봤을 때는 크게 문제 되는 부분은 없었지만, 반응형에 대한 이해나 사용성에 대한 이해는 아직 많이 부족하다는 걸 느꼈습니다.

반응형에서 주의할 것

디자인 파일은 가장 보기 좋은 해상도, 가장 많이 사용하는 해상도에서 디자인된 경우가 많습니다. 그래서 화면 사이즈가 변하면서 원래 한 줄인 텍스트가 두줄로 변하면서 생기는 디자인 붕괴를 주의 깊게 고려해야 합니다.

상단이나 하단과 같이 가운데가 아닌 곳에서 나오는 팝업 같은 경우에도, 디자인 파일에 숨겨진 의도를 찾아서 개발을 해야 합니다. 예를 들어 상단의 팝업이 상단의 헤더 부분을 가리게 디자인 파일에 나와있다면, 사이즈가 변해서 헤더 위치가 바뀌더라도 팝업이 헤더를 가리도록 나와야 하죠. 조금만 신경 쓰면 당연해 보이는 이야기이지만, 저는 디자인 파일에서 헤더와 팝업을 보면 팝업이 헤더를 가리도록 디자인되어있다고 생각하기가 쉽지 않았습니다. 이런 부분들은 디자이너의 의도가 아니더라도 스스로 캐치할 수 있다면 웹 페이지의 퀄리티를 높일 수 있는 좋은 디테일입니다.

더 배워나가자

실무를 통해 부족한 실력들을 확인하면서 아직 배울게 많다는 점을 알게 됐습니다. 이런 부족한 부분들을 메울 수 있도록 경험도 많이 쌓고 더 많이 배워서 더욱 높은 퀄리티와 좋은 퍼포먼스를 뽐낼 수 있는 웹 페이지를 만들고 소개해드릴 수 있도록 하겠습니다.

댓글0