DEVOCEAN

🚀 들어가며

안녕하세요. 에이닷에서 프론트엔드 개발 업무를 하고 있는 스카이입니다.

지난 9월 23일 토요일 FEConf 2025가 열렸습니다.

코로나 팬데믹 이후 오프라인 콘퍼런스는 오랜만이었는데 생각보다 사람들이 많아서 놀랐습니다. 다녀온 후기를 간단하게 정리해 보았습니다.

FEConf는 매해 열리는 Front-End 콘퍼런스로 FE 기술을 공유하는 콘퍼런스입니다. 이번 콘퍼런스는 세종대학교에서 진행되었습니다.

📚 가장 인상적었던 세션들

30분 단위로 세션이 있었고10분 단위의 Lightning talk 세션이 따로 있었습니다.

세션 중에 가장 기억이 남는 세션들 위주로 정리해 보았습니다.

🔥 스벨트를 통해 리액트 더 잘 이해하기

"다른 프레임워크를 배우면 리액트도 더 잘 이해할 수 있다"

이 세션에서 놀라웠던 건 스벨트의 파인 그레인드(fine-grained) 업데이트 방식이었습니다.

리액트처럼 전체 컴포넌트가 재렌더링되는 게 아니라, 바뀐 부분만 딱 업데이트하는 방식을 말하는데 빠른 성능을 내는 큰 장점이 있어 보였습니다.

또한 ref callback에 대해서도 설명했는데 Vue에서도 적용해 볼 수 있을 것 같습니다.

간단하게 ref callback에 대해 설명하면, ref에 ref로 선언한 값만 할당할 수 있다고 생각했는데요.

함수를 할당하는 방식을 말합니다. 다음은 예시 코드입니다.

이 방식을 통해 페이지가 in/out될 때 애니메이션을 구현하는 예시를 보여주었는데 생각하지 못했던 접근법이라 신선했습니다.

<template>
<input :ref="setInputRef" type="text"/>
</template>
<script>
function setInputRef(el: HTMLInputElement) {
  const inputEl = el
  if (inputEl) {
    inputEl.value = 'hello'
  }
}
</script>

♿ 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성

"웹의 힘은 보편성에 있다" - 팀 버너스 리

업무에 바빠 아무래도 우선순위가 낮을 수밖에 없는 웹 접근성에 대해 다시 생각해 보게 된 세션이었습니다.

ARIA(Accessible Rich Internet Applications) 속성 하나하나가 누군가에겐 정말 중요한 의미라는 생각을 하게 되었습니다.

ARIA 역할의 정의와 기본 원칙은 이렇습니다.

• ARIA는 HTML의 의미를 확장하거나 보완하는 역할로서, UI 요소에 적절한 역할을 명시해 보조기술에 정보를 제공함

• 이미 HTML에 정의된 역할은 우선적으로 사용하고, 없는 UI 패턴에 대해 ARIA 역할을 정의하여 표현함

ARIA 속성을 정리해 보면 다음과 같습니다.

• aria-expanded : 메뉴나 리스트가 확장되었는지 여부를 나타냅니다.

• aria-selected : 선택된 항목을 표현한다고 합니다.

• aria-controls : 버튼 등 UI 요소가 제어하는 대상 요소의 ID를 연결해 상호작용 관계를 명확히 합니다.

• aria-labelledby, aria-describedby : 레이블과 설명을 연결해 시멘틱 정보를 보완합니다.

🎨 최신 CSS? 10년 뒤에 쓰면 되나요?

"새로운 CSS 기술은 빠르면 1~2년 안에도 쓸 수 있다"

CSS 새로운 기능이 실제 적용되기까지 예전에는 5~8년 정도의 시간이 걸렸으나 요즘은 빠르게 진행되고 적용된다고 합니다.

이 세션에서 그 예로 다음 두 가지를 알려주었습니다.

Customizable Select, select box 디자인을 변경하려면 select 태그 자체로만 구현이 어려워 div, span 태그를 활용해야 했습니다.

하지만 요즘에는 select에 CSS를 적용해서 가능하다고 합니다. 자세한 코드는 링크에서 확인하실 수 있습니다.

또한 Popover API에 대해서도 언급해 주었는데요.

이것 역시 실무에 사용해 볼 수 있는 기능으로 보입니다.

🤖 UI 코드 생성 자동화를 프로덕션까지 (Figma MCP + Cursor)

"AI 시대, 개발자의 역할은 코드 작성에서 문제 해결로"

'오늘의 집' 회사에서 발표한 내용으로 Figma MCP + Cursor 조합으로 UI 개발은 Cursor에게 위임했다는 이야기였습니다.

디자인팀과 1px로 싸울 일이 없다는 마지막 말은 너무나 감동적이었습니다.

9명 팀에서 AI를 실제 프로덕션까지 도입한 사례로 국내에서는 거의 최초라고 하더군요.

특히 디자인 시스템과 AI를 연결하는 부분에서 많은 노하우를 알려주셨습니다.

유튜브에서 찾아보니 이것 관련 영상이 꽤 많이 나오더라고요. 참고해서 도입해 보면 좋을 것 같습니다.

Cursor + mcp + Figma 관련 영상

기타 - 부스 행사

강남언니, 오늘의집, AWS, MOYO 부스가 있었습니다. 링크드인에 각 회사를 구독하면 상품을 주는 행사도 진행 중이었습니다.