2023.05.22 ~ 2023.11.03 기간 동안
대학교에서 진행하던 국비지원 UI/UX 웹 퍼블리싱 과정을 참여했던 적이 있다.
내가 웹 프로그래밍을 희망하게 된 계기인데, 백엔드 파트도 조금 하긴 했었지만
전체적으로 디자인/퍼블리싱 위주의 과정이라 디자인은 감각이 삐꾸라 희망도 안했고
자연스럽게 프론트엔드를 희망하게 되었다.
처음에 소개 포스터를 볼 때 사용 기술에서 JAVA를 보고 이거라도 해야겠다! 라는 생각에
그리고 당시 자바를 제일 재밌게 했었던 기억 때문에 학교 일정이 힘들어지는거 생각 안하고
그냥 참여해버렸다!
이 과정의 끝에는 정부에서 감사를 오고 오신분들에게 과정을 하면서 배운 기술들을 설명하기 위해
최종 프로젝트를 해야했는데 그때 진행한 것이 도시락통 웹 카피코딩이다.
도시락통은 휴대용 와이파이 판매업체? 인데 전체적인 디자인이 깔끔하고 슬라이드/레이아웃 등등
퍼블리싱의 전반적인 요소를 적용해보기에 유용하여 선정했다.
약 두 달 정도 진행해서 메인페이지 포함 네 페이지 분량의 코딩을 마쳤다.
그때 당시 나름대로 완벽하게 해냈다고 생각했는데
1년 후 11월 29일 다시 파일을 뜯어봤다.
그동안 HTML 파일 구조.. CSS 우선순위.. JS도 다시 공부하고 한 상태로 봤더니
파일이나 코드 구조가 최악!
슬라이드도 작동 안하고 애니메이션도 제대로 안짜서 footer 밑에 여백도 생기고
CSS는 하나에 몰아써서 1600줄 이상이었다.
1단계 : 파일구조 뜯어 고치기
그래서! 전체적인 공사가 진행되었다. <-- 이게 진짜 힘들고 헷갈렸음.. ㄷ
1. src 밑에 이미지를 아이콘과 사진으로 나눠서 저장하고
2. CSS 파일을 main과 sub 혹은 Header Footer로 나눠서 저장하고
3. 라이브러리들을 다운받아서 적용
4. JS 파일도 기능별로 페이지 별로 구분해서 적용
사실 그냥 파일 만들어서 기능 나눠서 다시 적용하면 되는거 아니냐?
맞는데 코드가 길고 막 css는 중간에 쓰고 하던게 있어서 구분하는게 너무 어려웠다
그리고 나눠서 적용하면 경로 맞춰서 import 해야하니 넘나 어려운것..😥
그래도 이런것도 해봐야지 하는 마음으로 진행했다. 이것만 한 일주일 걸린듯...
2단계 : 기본적인 CSS 수정
파일 구조를 바꾸고 나니 CSS가 깨지는 부분이 생겼다..
대부분 경로를 맞춰줘서 문제가 없었지만 이전에도 있던 문제나 새롭게 생긴 문제랑 합쳐서
이것저것 정신이 없어졌다. 그래도 간단한 수정이라 금방 해결했다!
3단계 : JS 수정
사실 말이 JS 수정이지 기존에 동작하지 않던 효과가 너무 많았다.
일단 슬라이드가 적용되어있지 않았고, 숫자 카운팅과 그 위에 그래프를 숨겨주던 커버가
제일 상단에 올라와서 원본과 동일하지 않게 표시되었다.
그리고 슬라이드는 제일 처음에는 버튼이 보이지 않아야 했고 페이지네이션은 swiper에서 제공하는것이 아닌 직접 제작해야 했다. 파일구조 뜯어고치기 다음으로 시간 투자를 많이 했다.
결론!
약 3주? 정도 걸린 여정이었고 나름대로 찾아보며 공부도 했지만
역시 그 끝은 뿌듯했다..
이때보다 더 성장한것이 느껴져서... 아.. 내가 느끼지 못했지만 점점 능숙해지고 있구나 하는
짜릿함... 이래서 더 나아가려고 하는것은 아닐까.. ㅎ
