웹 퍼블리셔 실무 경험들

2,300 조회수 달성!!!

고맙습니다. (2024년 9월 22일 캡쳐본 기준)

🔥 1년 동안 필자가 느꼈던 경험들

그 누구도 알려주지 않았던 웹 퍼블리셔 맨땅에 헤딩하면서 습득한 경험들

웹 퍼블리셔 경험하면서 느꼈던 것들 그리고 개인 작업하면서 성장하고 경험했던 것들도 기록하고 앞으로 경험했던 것들도 꾸준히 기록하였습니다.

📢 중복된 글이 간혹 있을 수 있고 취업 준비하면서 경험했던 내용이라서 참고만 해주세요. 그리고 공유할 내용이 있으면 꾸준히 추가할게요. 제 글 읽어주셔서 고맙습니다. :)

Ver. 20230418
썸네일 이미지 또는 글 작성 시 이미지 업로드 중첩되어서 삭제

---

# 화면 설계

• 큰 영역부터 작은 영역까지 설계한다. 큰 틀 <header> <main> <footer> 부터 나누면서 작은 영역까지 설계한다.
  
  

• 프로젝트 시작하는 단계에서 유지 보수까지 생각하여 설계한다.
  
  

• CSS로 할 수 있는 요소를 JS로 하는 상황 최소화하여 작업한다.
  
  

• 디자이너가 준 파일 열어서 공통으로 사용할 수 있는 요소를 분석 후 공통 작업합니다. 공통으로 작업하다가 특정 부분에서 이 요소만 제어하는 상황이 문제가 발생합니다. 이를 해결하기 위해 CSS 선택자 우선순위 낮게 하여 공통 설계합니다. CSS 모듈화 검색하면 자세히 알 수 있다.
  
  

• 페이지 내부 콘텐츠 여백도 공통으로 설계 가능하다.
  
  

• 전체 공통 요소는 태그 선택자로 제어해 볼 수 있습니다. 클론 코딩하다가 느꼈던 애로사항이다.
  
  

• 페이지마다 CSS 파일 생성 후 작업합니다. 물론 CSS 파일 하나만 생성 후 작업할 수 있는데 규모가 큰 웹 사이트이면 유지보수 및 CSS 수정이 다소 어려움이 있었다.
  (음.. 회사마다 다르지만 제 경험상 규모가 큰 사이트는 파일 나눠서 생성하고 규모가 작은 사이트는 파일 하나만 생성하여 작업하는 것 같다.)
  
  

• 페이지에 들어가는 아이콘, 버튼, 이미지 등 공통으로 할 수 있는 것들 css 파일 하나로 정리해서 사용가능하며, 여러 프로젝트 할 때 사용할 수 있도록 소스를 만들어볼 수 있다.
  
  

• 콘텐츠, 페이지, 요소들이 추가되는 상황이 발생하니 대비하여 설계한다.
  
  

• 반응형 할 때 텍스트 줄이 많아지는 상황이면 CSS로 ".." 생략기호 넣을 수 있다.
  (디자이너랑 의논 후 텍스트 생략할 것인지 정한다.)
  
  

• 이미지 파일명 작성 언더바 _ 로 작성한다. 이미지 파일명 예를 들어 회사소개 페이지이면 company_ceo company_history_photo2022 company_value_photo 작성해 볼 수 있다. 물론 회사마다 다르지만, 제가 경험하면서 학습했던 것들은 언더바 사용으로 나온다. 실무에서 언더바 자주 사용하지 않다면 다른 방법으로 사용해야 한다.
  
  

---

# 작업

• 동적인 UI 구현할 때 HTML, CSS, JS 까지 생각하고 코드를 작성합니다. 생각하지 않고 작업하다보면 점점 힘들어지며, 나중에 수정하기 어려워집니다.
  
  

• HTML, CSS 웹 표준 지키면서 작업합니다. 웹 퍼블리셔이라면 지켜야하는 습관입니다.
  
  

• 퍼블리싱할 때 되도록 가상 클래스를 사용하지 않습니다. CSS 네이밍 하나 더 추가해서 사용합니다. 유지보수 측면에서 힘들고, 수정, 찾기, 다른 사람이 코드 봤을 때 힘들어합니다.
  
  

• 작업하다가 콘텐츠, UI 요소 추가, 삭제되는 상황을 대비하여 작업합니다. 텍스트가 1줄인데 갑자기 수정사항이 생겨서 2줄로 수정하는 상황 생겨서 텍스트 2줄 넣었는데 콘텐츠가 깨지는 상황을 대비하여 작업합니다.
  
  

• 디자인 요소가 여러 곳에 있는 상황일 때 position 사용한다면 CSS 클래스 2개 선언하여 제어합니다. 예를 들어 <div class="item item-a"></div> 공통으로는 item 각 요소는 item-a 로 제어합니다.
  
  

• CSS, JS 탐색 레벨을 낮아야 하고 간결한 네이밍 사용합니다.
  잘못된 예시
  CSS 탐색 레벨: .wrapper .container .header .logo img';
  JS 탐색 레벨: document.querySelector('.wrapper .container .header .logo img');
  올바른 예시
  CSS 탐색 레벨: .hd .logo img
  JS 탐색 레벨: document.querySelector('hd .logo img');
  
  

• CSS 속성 position 최소화합니다. 많으면 반응형 작업할 때 힘들어요..😭😵🤧 이미지 위에 폰트가 겹치거나 여러 요소가 겹치거나 할 때 사용합니다.
  
  

---

# 수정

• 수정사항이 발생하더라도 작업했던 레이아웃이 깨지지 않게, 무너지지 않게 수정합니다. 수정하다가 깨지거나, 무너지면 작업 시간이 많이 소요될 수 있습니다. (설계가 매우 중요하다고 생각됩니다.)
  
  

---

# 네이밍

• CSS 네이밍 지을 때 다른 사람이 바로 알아볼 수 있도록 네이밍 짓기 본인이 지을 때는 알아볼 수 있지만, 협업할 때는 한 사람이 작업한 거처럼 네이밍을 맞춰서 작업합니다. 퍼블리싱(개발) 가이드가 있습니다. 구글에서 퍼블리싱 가이드 검색하면 나옵니다. 다음에 간단한 퍼블리싱 가이드 만들어서 공유해 보겠습니다.
  
  

• 리스트 목록 네이밍 지을 때 01, 02, 03 이렇게 네이밍 짓기 말고 해당 요소의 형태로 지어야 합니다. 만약 첫 번째 목록이 끝으로 가야한다면 다시 순번을 매겨야하기 때문입니다.
  
  

---

# 스타일 공통

• 공통 CSS 에서는 선택자 최소 2개 또는 해당 페이지의 CSS 우선순위보다 낮게 해줍니다. 공통 CSS 우선순위가 높으면 해당 페이지의 우선순위가 낮아져서 제어하기 헷갈리는 현상이 발생합니다. 공통 CSS 예시로는 .all-page .cir / .aboutme-page .title 이렇게 선택자 2개로 할 수 있으면 합니다. 만약 3개를 잡아야 한다면 해당 페이지의 CSS 우선순위보다 낮게 해주면 됩니다.
  
  

• A라는 페이지에서 요소를 가져와서 B페이지, C페이지 등 어디서든 사용할 수 있도록 모듈화가 되어야 합니다. 방법론 SMACSS, BEM, OOCSS 있다. 구글링해서 알아봅니다. 방법론 잘못 사용하면 이러지도 못하는 상황이 되니까 깊게 알고 사용합니다.
  
  

---

# 협업

• 협업할 때 폴더 구조 설계할 때 개발자와 협의 후 설계합니다. 개발자한테 물어보고 폴더 생성하기 임의로 퍼블리셔이 만들어서 개발자한테 주면 다시 파일 생성 하는 경험해봤습니다.😭 그리고 회사마다 다르며, 차이가 있을 수 있습니다. 서로 의논 후 파일 생성하면 좋을 것 같습니다.
  
  

---

# 프로젝트 중요한 포인트

• 처음부터 vscode 열어서 코드 작성하지 말고 성공적인 프로젝트의 목표를 정하고 진행합니다.
  
  

• 프로젝트 시작할 때 체계적으로 시작합니다. 나중에 복잡한 상황이 생길 수 있습니다.
  
  

• 생산성을 높이기 위해 만들어진 코드를 사용합니다. 최소한 이해하고 사용할 것!! 만약 시간이 없으면 우선 사용하고 추후에 사용했던 코드를 이해합니다. 이해하지 않고 넘어가면 실력이 반감합니다.
  
  

• 프로젝트 끝난 후 다음 프로젝트를 위해 전에 했던 프로젝트 점검하고 코드 리뷰합니다. 개선할 점을 찾아서 고쳐나가야 합니다.
  
  

• 기획자, 디자인, 개발자 작업 프로세스를 알고 프로젝트를 진행한다. 각 직군마다의 프로세스를 모르거나, 무작위로 프로젝트 진행 시 완성도 높은 프로젝트가 되지 않습니다. 그래서 커뮤니케이션이 매우 중요합니다. 제가 규모가 작은 프로젝트의 경험이고, 큰 프로젝트 경험이 없어서 모르겠네요.. 😭😭😭
  
  

---

# 커뮤니케이션

• 기획자, 디자이너, 개발자 서로 간의 커뮤니케이션 합니다. 어설프게 커뮤니케이션하면 나중에는 프로젝트 문제가 생겨서 서로 마찰이 생길 수 있습니다. 확실하고 명확한 커뮤니케이션으로 합니다. 서로 간의 입장으로는 긴가민가하는 상황이 발생해서 문제가 될 것이고, 프로젝트 시 문제가 발생할 듯 싶어요.
  
  

• 커뮤니케이션할 때 듣는 사람한테 이해하기 쉽게 설명하고 또 설명하면서 이해할 때까지 인내심을 갖고 배려하는 커뮤니케이션해야 합니다. 이해하고 넘어간다고 착각하면 안 되고, 다시 되짚고 넘어가야 합니다. 그리고 설명했는데 다시 물어본다면 더욱더 쉽고, 상세하게 커뮤니케이션합니다. 또한, 다른 방법을 찾아야 합니다. 그렇지 않으면 서로 트러블 생겨서 문제가 발생합니다. 커뮤니케이션의 문제는 본인한테 있을 수 있습니다. 커뮤니케이션은 업무보다 굉장히 중요하며, 반드시 서로의 배려 깊은 마음으로 커뮤니케이션합니다.
  
  

• 커뮤니케이션할 때 듣는 사람이 이해가 안 되면 반복적인 커뮤니케이션보다 다른 방법으로 커뮤니케이션을 바라보면 좋습니다. 다른 방법으로 찾다가 듣는 사람이 이해가 되고 원활하게 커뮤니케이션되면 그 방법이 듣는 사람의 커뮤니케이션입니다. 음.. 하나의 직군으로 표현하면 강사..? 개개인의 학생들이 다르고 이해하는 것이 다르기 때문에 학생들이 이해하도록 설명(커뮤니케이션)하는 것..? 라고 생각합니다.
  
  

---

# 개인적인 경험과 생각

• 디자인 시안이 나오면 사이즈, 폰트, 레이아웃 등 디자이너와 충분히 이야기하고 작업합니다. 개발자도 마찬가지로 충분히 이야기하고 작업합니다.
  
  

• 클라이언트(구성원)한테 프로젝트의 작업하는 프로세스를 공개하고 진행하면 원활하게 진행이 되지 않을까? 생각합니다. 프로젝트가 어떻게 진행 되는지 모릅니다. 왜냐하면 진행이 다 되는 시점에서 요구 사항이 들어오면 작업자가 힘들어하는 모습이 보였습니다. 케바케라서 정확하지 않을 수 있습니다. 이 문항은 오직 저의 경험이고, 개인적으로 바라는 프로젝트 프로세스입니다.
  
  

• 제이쿼리 사용하지 말고 순수 자바스크립트로 사용하면 좋을 것 같습니다. 순수 자바스크립트 먼저 선행학습하면 제이쿼리, 리액트, 뷰 등 다양한 언어를 습득하려고 할 때 조금이나마 수월하게 습득 가능하다고 생각합니다.
  
  

• 인터랙션 구현할 때 CSS 애니메이션 창작해서 만들어보면 좋을 것 같습니다. 인터랙션 실력 키우면 좋은 방법이라고 생각합니다.
  
  

• 어디서든 문제해결 능력 필수다. 문제해결 능력은 사람마다 다르고 해결하는 과정도 다르다.
  
  

• 자주 사용하는 소스를 만들어서 재사용, 재사용할 때 코드 알고 사용, 모르고 사용하면 나중에는 코더로 가는 길 같다.
  
  

• 공통 UI 요소 먼저 작업한다. 그리고 나머지 작업한다.
  
  

• 코딩을 배우고 개인 프로젝트할 때 응용이 안되면 다시 한번 더 복습 할 겸 학습하고 응용해 본다. 만약에도 안되면 챕터마다 조금씩 바꿔가면서 응용해 본다. 그래도 안되면 커뮤니티 또는 친구, 지인 등 질문을 통해 이해하고 응용해 본다. 그리고 다시 한번 더 복습하고 응용해 본다. 꾸준함이 중요하다는 것을 깨달았다.
  
  

• 사수(같은 직무의 동료) 없이 맨땅에 헤딩했던 경험이 너무 힘들었으나 소중하고 값진 경험을 했다. 하지만 혼자서 해내는 프로젝트는 경력자가 아닌 신입은 매우 힘들었다. 물론 맨땅에 헤딩한 경험도 나쁘지는 않지만 1시간 작업이 소요되는 업무인데 혼자서 작업하니 10시간 소요되는 경우가 발생하여 최소한 기술적인 문제에서 조언을 할 수 있는 같은 직무의 동료 또는 자신보다 경력이 있으신 분이 계시면 좋을 것 같다. 상황에 따라서 다를 수 있지만..
  
  

• 1년 다니고 몇 개월 있다가 회사 사업자등록번호 조회하니까 폐업이 되었다. (경영악화로 폐업) 내 경험이 사라지는 느낌이 들었다. 회사 홈페이지라도 경력란에 보여주면 좋을텐데.. 내 경험으로 어필해야 되겠다.
  
  

---

피드백 댓글로 남겨주시면 수정하겠습니다. 🙏🙏🙏