[작성자:] 김 형준

AI에게 물어봤더니 방법은 3가지랜다. (AI의 답변을 이렇게 기록해 둔 이유는 답변을 얻기 위한 과정이 단순히 몇번의 프롬프트 입력을 통해 얻지 않았기 때문이다.)

첫째, 호스트 요소(:host) 스타일로 흔히 하듯 사용자 정의 Tag에 대해 스타일을 지정하면 된다.

즉, 아래처럼.

/* style.css */
my-counter {
  display: block; /* 핵심! */
  margin: 20px;
  border: 1px solid red;
  width: 300px;}

사실, 처음엔 제대로 작동하지 않았다. 그 이유는 display에 대한 스타일 값을 지정하지 않았기 때문이다. 사용자 정의 Tag의 display 스타일에 대한 기본값은 미지정이다. 이 display를 지정하지 않으면 padding 이든 margin이든 width든 모두 엉망진창으로 계산되어 반영된다. 이 첫번째가 내가 원했던 답안이다. 그런데 AI는 2가지를 더 제시해줬고 내가 원했던 이 것보다 더 나은 방안이라며 제시했다. 정말 더 나은 방안인지 확인은 해보지 않았으나 일단 정리해 둔다.

두번째는 CSS 커스텀 프로퍼티의 사용이다.

즉, CSS 변수를 사용하라는 건데… 이 방식이 가장 권장되는 방식이라고 한다. AI가 알려준 것을 나열하면 다음과 같다.

컴포넌트 제작자가 내부 스타일의 특정 값을 CSS 변수(Custom Property)로 노출시켜주면, 사용자는 외부에서 이 변수 값을 바꿔서 내부 스타일을 변경할 수 있습니다. 이것이 가장 유연하고 권장되는 “스타일링 API” 설계 방식입니다.

컴포넌트 제작자 (MyCounter.js): 내부 스타일에서 CSS 변수를 사용합니다. var(–변수명, 기본값) 형태로 작성합니다.

// src/MyCounter.js
const templateStyleMyCounter = document.createElement('template');
templateStyleMyCounter.innerHTML = /*html*/ `
  
 `;

컴포넌트 사용자 (style.css): 외부 CSS에서 해당 변수의 값을 재정의합니다.

/* style.css */
my-counter {
  /* MyCounter 내부의 버튼 배경색을 초록색으로 변경 */
  --my-counter-button-bg: green;
  
  /* MyCounter 내부의 span 글자색을 보라색으로 변경 */
  --my-counter-span-color: purple;
}

세번째는 ::part 의사 요소를 사용하는 방법이라고 한다.

컴포넌트 내부 요소를 직접적인 대상으로 스타일을 지정할 수 있다. AI가 설명해준 내용 그대로를 언급하면 다음과 같다.

컴포넌트 제작자가 내부의 특정 요소에 part 속성을 부여하여 외부에 노출시키면, 사용자는 ::part() 의사요소를 사용해 해당 부분의 스타일을 직접 지정할 수 있습니다.

컴포넌트 제작자 (MyCounter.js): 스타일을 지정할 수 있도록 하고 싶은 내부 요소에 part 속성을 추가합니다.

// src/MyCounter.js
const templateDOMMyCounter = document.createElement('template');
templateDOMMyCounter.innerHTML = /*html*/ `
  <div>
    <span part="count-display"></span>  
    <button id="incrementButton" part="increment-button">Increment</button> 
  </div>
`;

컴포넌트 사용자 (style.css): ::part() 선택자를 사용하여 해당 파트의 스타일을 지정합니다.

/* style.css */
/* my-counter 내부의 increment-button 파트의 스타일 지정 */
my-counter::part(increment-button) {
  background-color: orange;
  border-radius: 0;
}

/* my-counter 내부의 count-display 파트의 스타일 지정 */
my-counter::part(count-display) {
  font-style: italic;
  color: red;
}

과연 미래의 소프트웨어 개발은 AI로 인해 얼마나 그 수준이 업그레이드 될 것이며 개발 복잡도는 얼마나 올라갈까…… 향상된 수준과 복잡도를 AI 없이 오직 사람만으로 수용할수 있을까?