L 프로젝트 퍼블리싱 회고

회사에서 처음으로 퍼블리싱을 한 프로젝트가 끝났다. 7월에 진행한 프로젝트이니 시간이 좀 지났지만, 업무 도중에 메모했던 것들과 작업 내용들을 다시 보면서 회고했다. 해당 프로젝트에서는 짧은 기획과 디자인, 그리고 퍼블리싱을 진행하였는데 그중에서 퍼블리싱에만 집중해봤다. KPT 템플릿에 커뮤니케이션, HTML, CSS 세 가지 분야로 나누어봤다.

 

1️⃣ KPT 회고

피그잼에 포스트잇을 붙여가며 분류했다.

Keep

1. (CMN) 할 일 정리하면서 작업 진행
2. (HTML) 접근성 고려한 마크업
3. (CSS) 효율적으로 관리하기 위해 variables 사용

Problem

1. (CMN) 퍼블리싱 범위에 대한 혼란
2. (HTML)
   1. Figma 'AutoHTML'을 사용한 내보내기: 필요하지 않은 부분까지 <div>로 작성되어 수정할 부분이 많아진다.
   2. 명확하지 않은 네이밍 규칙: CamelCase와 snake_case를 혼용했고 구조화 규칙이 명확하지 않다.
   3. select, input date 등 디자인이 힘든 컴포넌트들을 포기
   4. table의 더보기/접기 미구현
3. (CSS)
   1. style.css에 reset, var, style 모두 포함하여 관리 문제 유발 가능

Try

1. (CMN) 퍼블리싱 범위는 HTML/CSS 까지
2. (HTML)
   1. 직접 HTML 짜기
   2. BEM 사용
   3. 스타일링에 집중 혹은 대안 찾기
   4. table 사례 찾기 -> JS 사용해야 함. 
3. (CSS)
   1. 목차 작성, style.css를 용도별로 분류
   2. variables에 spacing 추가
   3. 인터랙션 추가

---

2️⃣ Try +@

Try 항목 중 덧붙이고 싶은 부분들에 글을 좀 더 작성해본다. 

1. 퍼블리싱 범위

JS 지식은 아직 부족하기도 하고, 한다고 해도 추후 FE에서 React로 사용할 것이기 때문에 HTML, CSS까지만 가능한 범위까지 작업하기로 협의했다.

 

2-2. BEM 사용 

네이밍 단계에서 겪은 혼란 중 하나는 이것도 묶고, 이것도 묶는데 묶을 때마다 container, item를 붙이는 방식으로 괜찮나...? 하는 거였다. containerCenterItemItem 이런 형식이 되버리는거다...🙄 대충 봐서도 "이건 아니다" 싶었고, 그래서 네이밍에 더 신경을 써야겠다 싶었다. HTML/CSS에서 가장 대중적으로 쓰이는 방법은 BEM이기에 이 방법론을 사용하려 한다. 

 

2-3. 스타일링에 집중 혹은 대안 찾기

MDN의 <select> 문서를 보면 다음과 같은 내용을 확인할 수 있다.

이 <select>요소는 CSS로 생산적으로 스타일을 지정하기 어려운 것으로 악명이 높습니다. 모든 요소와 마찬가지로 특정 측면에 영향을 미칠 수 있습니다. 예를 들어, 상자 모델 , 표시된 글꼴 등을 조작할 수 있으며 속성을 사용하여 appearance기본 시스템을 제거할 수 있습니다.
그러나 이러한 속성은 브라우저 간에 일관된 결과를 생성하지 않으며, 열에 서로 다른 유형의 폼 요소를 줄 세우는 것과 같은 작업을 수행하기 어렵습니다. 요소의 내부 구조는 복잡하고 제어하기 어렵습니다. 완전한 제어를 원하면 폼 위젯을 스타일링하는 데 좋은 기능이 있는 라이브러리를 사용하거나 비의미적 요소, JavaScript 및 WAI-ARIA를 사용하여 의미를 제공하는 <select>자체 드롭다운 메뉴를 롤링해 보세요 .

커스텀한 <select> 만들기 위해서는 1. 라이브러리를 사용 2. 시맨틱 마크업을 하지 않고 스타일링에 집중하거나 3. 자바스크립트나 4. WAI_ARIA를 사용하라는 대안이 작성되어 있다.

여기서 1, 3은 현재 내가 할 수 없는 일이고 2이나 4를 해야 되는데, 4가 무엇인지 찾아봤다. W3C를 확인해보니 WAI-ARIA를 사용한 select가 있었다. 다만 이쪽도 JS를 사용해야 하고, ChatGPT에 물어보니 <summary>와 <details>를 활용하는 방법도 있지만 화면판독기에는 인식되지 않는다고 하니 한계가 있다. 결국 개발자와 원만한 협의를 하거나 스타일링에만 집중해야 하겠다.

 

3-1.목차 작성, style.css를 용도별로 분류

CSS Guidelines (2.2.5)에서는 목차를 제공하는 것이 좋으며, 별도의 파일로 분할한 다음 연결하는 것이 좋다고 되어있다. 따라서 이 방식을 채택했다.

 

3-2. variables에 spacing 추가

간격마다도 규칙이 있고 특히나 Figma에 variables를 사용하고 난 뒤로는 그 연결성이 더 높아져서, 이를 CSS 작성할 때도 적용해야 겠다 싶다. 

 

3️⃣ 소감

프로젝트를 끝낸 직후에 다른 프로젝트를 진행하여서 당시에는 추상적으로 이거해야지, 이거해야지, 하는 것들을 와다다다 진행했던 기억이 있다.

회고하면서 되돌아보니 이런 점이 잘 한 부분이었지, 이 부분은 이번 프로젝트에서 많이 수정했지, 여기는 계속 공부해야 할 부분이구나. 하는 것들을 느낀다. 재밌다! 더 공부하고싶다!