| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
- 방심은금물
- react
- 2020
- 리엑트할수있는퍼블리셔라규
- 커스텀훅
- nuxt.js
- 냥빨이다가온다
- ROUTER 버전6
- chart responsive
- 간식금지다!
- classList add
- classList toggle
- 내배위의고양이
- nuxt layout
- chart.js
- react-router
- 안짤렸다
- 클래스 토글
- 언젠간가겠지
- 배열중복제거
- react-router-dom
- windowwidth
- 포트폴리오
- classList remove
- new set()
- 퍼블리싱
- 대표님물리기없기
- 접근성
- vue3 setup
- classList
- Today
- Total
틈
사이트에 새 브랜드 입히기 본문
3월 부터 브랜드 리뉴얼 이슈가 있어서
홈페이지, 앱, 이벤트 등 일이 많아졌다.
1. 브랜드 홈페이지
- 브랜드 홈페이지의 이전 브랜드를 걷어내고, 새로운 브랜드로 갈아입히는 작업이었다.
업력이 길지 않은 스타트업이라 브랜드를 알리는 목적으로 홈페이지가 제작되어 있었다.
=> 로고가 곳곳에 포진되어 있고, 전부 찾는데 애를 먹었다. - Scale-up이 동반되어 홈페이지 전반에 문구 변경이 있었다.
=> 디자이너의 꼼꼼한 지휘 아래 대대적 수정.
공수 산정 시에 고려되지 않은 부분이라 추가 시간이 필요했음. - 브랜드 홈페이지 자체가 외주 작업으로 탄생한 작품이어서 확장성에 대한 고려가 부족했고, 레이아웃 변경에 어려움이 있었다.
(동일한 구조이나, 여기저기 마크업이 다 들어가 있는...)
=> 이벤트 페이지에서 동일한 레이아웃을 사용함에도 불구하고,
각 이벤트 페이지 하나하나를 제작할 때, 레이아웃 코드도 같이 들어가 있었다. 비상식의 끝판왕이었다..
마침 이번 리뉴얼에서 footer 수정이 있었기에,
짧은 React 지식으로 레이아웃을 통일해 보았으나, 앞으로도 개선할 지점이 많음. - styled-component 위주의 작업에서 처음으로 emotion을 사용해 보았다.
=> import 하는 이름만 다를 뿐.. 차이점을 잘 모르겠다. - AWS 이미지 캐싱 문제로 이미지를 변경해도 홈페이지에서 보여지는 이미지는 변경되지 않았다.
=> 이미지 캐싱을 지우는 방법을 배웠으나, 완벽하지 않아 이름을 바꿔서 사용중.
2. B2B 홈페이지
회사의 브랜드 리뉴얼도 있었으나, B2B는 Indentity-color 변경건도 있어서,
4월에 오픈한 홈페이지의 색상, 로고, 이미지 등을 전부 교체해야 했다.
개발은 사내에서 담당했으나, 퍼블리싱이 외주로 작업된 터라
내가 작업하는 방식과 많이 달랐으므로 그 또한 허들이었다.
처음에는 따라가보려고 했는데,
풀반응형 구축이 당연시 되었던 작업방식을 버릴 수 없어서,
기존 PC,Mobile에만 최적화 되어 있던 코드로 만족할 수 없었고,
일부 태블릿 사이즈의 영향이 크지 않은 부분을 제외하고는 전체 수정했다.
1주면 넉넉하려니 했던 작업이 거짓말 보태서 재구축 수준이 되었고,
밤잠 못자가며 꼬박 2주를 채웠다.
(최초에 작업기간을 2주로 요청했으므로 다행...)
홈페이지 오픈 전, QA기간에 B2B 홈페이지 수정 작업을 일부 담당했는데,
React로 하는 퍼블리싱을 맛볼 수 있어서 좋아하는 repository였다.
B2B 홈페이지에서 처음으로 React로 slide, tab 구현을 해보기도 했고,
이미 외주 디자이너, 외주 퍼블리셔는 손을 뗀 입장이라 제약이 덜했다.
back단 퍼블리싱을 하면서 배운 기본 React 코딩 지식을 적용해볼 test bed라서 이번 브랜드 리뉴얼이 더 재미있었다.
이번 작업을 끝내고 pull request를 날리고 보니,
수정파일 갯수만 150개가 넘었다.
bitbucket에서 diff코드를 체크하는 버릇이 들었는데,
diff 파일이 너무 많아서 한 화면에 보여주지 못하고 prev,next 버튼이 생겼다.
누르면 한 파일씩 볼 수 있게 해주더라.
(처음엔 bitbucket 업데이트 한 줄...)
후기
효율적으로 코드를 짠다는 것은 참 어려운 것 같다.
그나마 다행인 것은 퍼블리셔로서 react를 deep하게 체험할 수 있고,
효율을 고민할 수 있는 기회가 주어졌다는 것.
2Q~3Q 사이에 브랜드 홈페이지 개편을 앞두고 있으나,
php 개발이라 이번에는 오랜만에 jQuery를 좀 만질 것 같다.
홈페이지를 처음부터 React로 짜고 싶었는데, 좀 아쉽다.
개편할 홈페이지를 React로 만들어 보는
side project를 진행해 보는 것도 나쁘지 않겠다.
B2B 홈페이지 작업을 하면서 정말 신났다.
회사에서 다시 이런 작업을 할 수 있을까?
이벤트 랜딩 페이지 작업은 여럿 있지만,
이렇게 React로 된 홈페이지를 통째로 들여다보고
수정하는 기회가 자주 올 것 같지는 않다.
만약에 이런 작업이 또 오게 된다면,
지금보다 더 효율적인 코드를 위해
나는 무슨 노력을 할 수 있을까?
새로운 분야는 질문하지만,
이미 노출된 문제는 스스로 해결하는 버릇을 들이기 위해
질문 횟수를 현저히 줄였다.
특히 React로 만드는 퍼블리싱 관련해서는
이번 2개 프로젝트 모두 질문 0회로 작업을 마쳤다.
내가 맡은 분야에 대해서는 최고가 되어야 한다.
다시 한 번 새기는 말.
세상에서 신발 정리를 제일 잘 하는 사람에게
절대 신발 정리를 맡기지 않는다.
'log > comment' 카테고리의 다른 글
| 프로젝트 종료 (0) | 2022.09.13 |
|---|---|
| 새 강의를 결제했다... (0) | 2022.04.19 |
| [수습회고] 수습을 마치고 (0) | 2022.03.17 |
| 너의 무게 (0) | 2022.03.15 |
| 2021년. 회고. (0) | 2022.01.09 |