[웹퍼블리싱] 유지보수를 고려한 퍼블리싱 기법
세컨드스페이스 디테일 연구소
오늘로서 저는 퍼블리싱을 시작한 지 꽉 찬 2년이 됩니다.
이제 혼자서 사이트 하나는 거뜬히 만들 수 있는 연차라고 할 수 있겠죠.
2주년이 된 기념으로 그동안 수많은 프로젝트를 하면서 겪었던 시행착오를 글로 풀어볼까 합니다.
제 글을 읽는 신입들에게 조금이나마 도움이 됐으면 합니다.
유지보수 잘하는 법? 처음부터 제작할 때 잘 짜면 됩니다.
그게 무슨 말이야!그러나 방법은 정말 이 것 밖에 없습니다.
제작이 아닌 유지보수만 하시는 것이라면... 제작사가 코드를 잘 짜셨길 바랍니다.
어찌 됐든, 어떻게 짜야 잘 짰다고 소문이 날 수 있을지 알아볼까요?
1. width값을 디자인대로 잡았는데 모바일에서 레이아웃이 깨져요.
이런 경우 백이면 백 width값을 px로 잡은 것입니다.
반응형으로 제작하는 사이트라면 콘텐츠의 width값을 신경 써주셔야 합니다.
디바이스의 해상도 및 사이즈는 다양하므로 width 값을 px로 잡아버리면 레이아웃이 깨지는 것은 당연합니다. px은 절대 단위이니까요.
고로, 이런 경우 당황하지 말고 미디어 쿼리 css에서 % 등 유동성 있는 단위로 바꿔주세요.
물론 유동성이 있는 단위는 % 외에도 다양합니다. 좀 더 다양한 단위를 활용하고 싶으시면 아래의 링크를 참고해주세요.
https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573
출처 : 당신은 모를 수도 있는 CSS의 7가지 단위 (by. Jonathan Cutrell)
2. 폰트 사이즈를 전면 수정해야 하는데 언제 다 수정하죠?
이렇게 작성하셨겠지요?
뭐, 그럴 거 같았어요.px은 절대 단위입니다. 그러므로 기본 폰트 사이즈를 지정해주고 상대 단위인 em으로 조정을 해주셔야 합니다.
그래서 보통 저는 body에 p {font-size: 16px;} 이런 식으로 폰트의 기본 사이즈를 지정해주고, 이를 기준으로 h 태그는 상대 단위인 em으로 조절을 해줍니다.
이때 px을 em 단위에 맞게 변환을 시켜줘야 하는데요. 저는 아래의 사이트를 자주 이용합니다. 계산하기 귀찮아서요.
출처 : PXtoEM.com (by. Brian Cray)
3. nth-child/nth-of-type을 남발하지 말자.
우리는 하나의 프로젝트를 작업하면서 수많은 수정사항을 겪게 됩니다.
클라이언트의 마음은 갈대와 같아 ‘이거 빼주세요.’, ‘아 아니에요 아무래도 있는 게 나은 거 같은데...’, ‘아냐 빼주세요.’를 반복하게 되지요.
하...이럴 경우를 생각하지 못하고 nth-child/nth-of-type을 남발하게 된다면 나중에 CSS를 다시 만져야 하는 귀찮은 일이 생기게 됩니다. 제가 한창 저 기능을 남발할 때 있었던 일을 예시로 들어보겠습니다.
지자체 관광사업 사이트를 한창 만들 때인데, 지역별 도시 소개 페이지가 있어서 지역 리스트 페이지가 필요했습니다.
카드 st로 디자인을 했고, 특정 몇몇 카드에 색깔을 넣길 바라셨죠. 요청사항대로 작업을 완료하였습니다.
그런데 몇 주 뒤에 도시 몇 개를 빼야 한다고 피드백이 왔었습니다. '그렇구나.'하고 처리를 하는데 어머나!
수정 결과를 확인해보니 색깔이 뒤죽박죽으로 들어갔었죠. 왜 이런 결과가 나온 걸까요?
그 당시 nth에 꽂혀있던 저는 리스트에 클래스를 주지 않고 css에서 nth-child(n)으로 처리해 색깔을 넣었었습니다.
그러니 이런 참사가 발생했던 것이지요.
그러면 어떻게 써야 잘 썼다고 소문이 날까요?
리스트 간 간격을 띄울 경우, 짝수만 색깔이 들어갈 경우 등 주기적인 요소(?)가 필요할 때 사용하시면 좋습니다.
위의 코드는 리스트 간 간격을 띄울 경우의 예시입니다.
<li>에 간격을 띄우기 위해 margin-right가 들어갔고, nth-child를 사용하여 <li>의 마지막에는 margin-right: 0이 들어가 있습니다. 이러면 무조건 <li>의 마지막에는 margin-right가 0으로 적용이 되겠죠?
이렇든 nth-child는 아예 안 쓸 수는 없지만 그래도 남발은 자제해야 하며 적재적소에 잘 써야 하는 기능입니다.
4. 대표 컬러는 클래스로 지정해주세요.
이런 경우는 자주 있는 일은 아니지만 종종 발생하는 경우가 있습니다.
‘좀 더 눈에 확 들어오는 색깔 없나요?’, ‘뭔가 샤~한 색이면 좋을 것 같아요.’
음.. 이제와 서요?작업 초반에 얘기가 나오면 그나마 다행이지만 저런 경우는 거의 대부분 작업 막바지 혹은 QA 때 들어옵니다.
물론 전체 바꾸기로 컬러 코드를 변경해주면 되지만 클래스로 색을 정하여 바꾸는 것이 더 쉽고 빠르겠죠?
우리의 생명은 스피드이니까요.
예를 들어 Apple Band 사이트의 시그니처 컬러가 #ee4b55라면,
.cab {color: #ee4b55;} .bab {background-color: #ee4b55}
이런 식으로 사이트명의 약자를 활용하여 클래스를 지정해준 뒤 구조를 짤 때 클래스를 넣어줍니다.
5. 전체 css와 개별 css를 생성해주세요.
h1~h6, 폰트 굵기, 자주 쓰는 컬러 등 공통적으로 적용해야 하는 스타일과 주기적으로 사용되는 스타일은 차곡차곡 모아 css 파일 하나에 담으세요. 그리고 페이지마다 개별 css를 생성하여 작업을 해주세요.
이렇게 나눠서 작업을 진행하면 스타일 구분하기도 쉽고 페이지마다 공통부분이 디자인이 묘하게 다를 경우 작업하기도 수월합니다.
6. 클라이언트가 레이아웃이 무너진다는데 저는 안 무너지는데요.
익스플로러 확인해보셨나요?
날이 갈수록 크롬 사용률이 높아진다고 하지만 그래도 우리나라는 익스플로러를 사용하는 인구가 더 많습니다.
익스 없어졌으면...우리가 짠 것들이 브라우저별로, 또 그 버전별로 다르게 보일 수 있습니다.
윈도우 환경의 익스플로러
맥 환경의 크롬위는 같은 구조 및 스타일입니다. 그러나 브라우저에 따라 다르게 보입니다.
그러므로 항상 작업할 때는 익스플로러, 크롬 등 주요 브라우저들을 확인하시면서 작업을 해주세요. 버전도 마찬가지입니다.
7. 해상도 또한 다양합니다.
2560x1080, 1920x1080, 1680x1050... 이 외에도 수많은 해상도를 사용하는 사람들이 많습니다.
작업하실 때 다양한 해상도를 고려해서 작업하신다면 일이 덜겠죠?
1920x1080 데스크톱 해상도
1440x900 노트북 해상도확연히 차이가 나지요?
크롬에는 다양한 해상도를 보여주는 앱이 많습니다. 하나 받으셔서 작업하실 때 사용하시면 유용하실 것입니다. 저는 Window Resizer라는 앱을 사용하고 있는데 나름 쓸만합니다.
여담인데 고구마라고 저희가 새로 론칭한 웹사이트입니다.
클라이언트 덕에! 속상한! 마이 핥! 고구마에서 풀어보세요.
8. 경우의 수는 다양합니다.
신입분들이 제일 많이 하는 실수라고 생각됩니다. 디자인에 나와있는 그대로 작업을 하기 때문에 QA 때 어마어마하게 코멘트가 달리게 되죠.
- 이미지가 너무 크게 나와요.
큰 사이즈의 이미지를 등록할 때 퍼블리셔가 작업 시 이미지 사이즈를 미리 잡아주지 않았다면 아마 콘텐츠를 벗어나 가로 스크롤이 생겼을 것입니다. 보통의 클라이언트들은 이런 상황을 별로 좋아하지 않지요.
작업하실 때 img에 width: auto; max-widht:100%; height: auto;를 넣어주세요. 이미지가 콘텐츠 사이즈보다 크다면 콘텐츠 사이즈에 맞게 줄어들 것이고, 콘텐츠 사이즈보다 작다면 사이즈 그대로 나올 것입니다.
- 제목이 2줄이 되니까 레이아웃이 무너져요.
우리는 제목이 2줄 이상이 되거나 본문 내용이 짧고 길 경우 등을 생각해야 합니다. 그래서 다양한 상황의 테스트 글도 올려보고 해야 하지요. 제목의 경우, width 값을 지정해주는 등 여러 상황을 대비해 스타일을 짜셔야 합니다.
이 외에도 신입이 겪게 될 상황은 무궁무진합니다. 그래도 위의 경우를 잘 인지하고 보안한다면
좀 더 성장할 수 있지 않을까요?
오픈 슬랙 채널에서 소통해요!
잡담 / 개발 문화 / 일하는 방식 / 정보 공유 / 채용 문의 / 프로젝트 문의 등 어떠한 소통도 환영합니다 :)
오픈 슬랙 채널에 참여하기⬇️
https://join.slack.com/t/secondspace-open/shared_invite/zt-19q85dgid-6TCjbezQs4TTafBwT4BxAQ
written by. 옥천왜가리
세컨드스페이스
