프론트엔드 개발자는 무엇을 설계하고 만드는가

UI를 '보이게'만 하는 사람이 아닌, 사용자 경험 전체를 '작동하게' 만드는 설계자

 

1. 프론트엔드 개발자 = UI 엔지니어 + UX 설계자 + 데이터 흐름 설계자

Q. 어떤 걸 만드는 사람인가요?
A. 웹/앱의 UI를 구성하고, 사용자와의 상호작용(인터랙션)을 구현하며 서버의 데이터를 사용자 흐름에 맞춰 전달하는 역할을 합니다.

 

사용자 눈에 보이는 모든 요소와 그 뒤의 동작을 설계하고,

그 흐름이 끊기지 않도록 만드는 것이 프론트엔드 개발자의 핵심 역할입니다.

 

2. 단순한 버튼도 프론트엔드는 '설계'가 필요하다

ex) 로그인 버튼 하나를 만든다고 할 때

<button onClick={handleLogin}>로그인</button>

겉으로 보면 간단한 코드 한 줄이지만, 이 안에는 수많은 고려사항이 담겨 있습니다.

 

고려 항목	설명
버튼 클릭 시 로딩 처리	요청 중 중복 클릭 방지, 스피너 표시
입력값 검증	비어 있는 이메일/비밀번호일 경우 버튼 비활성화
서버 통신	axios.post()로 API 호출, 응답 처리
오류 대응	로그인 실패 시 정확한 메시지 표시
사용자 흐름	로그인 성공 시 어디로 이동할지 결정
시각적 스타일	모바일/PC에서 버튼 정렬과 간격 조정
접근성	스크린리더용 라벨, 키보드 포커스 등 처리
테스트	로그인 로직 유닛 테스트 및 UI 테스트 수행

즉, 하나의 버튼조차도 디자인, 기능, 흐름, 상태, 예외까지 고려한 설계 대상입니다.

 

3. 화면 하나는 어떻게 만들어질까?

ex) '상품 목록 페이지' 개발 흐름

 

Step 1. 기획서 확인

- 이 페이지는 어떤 목적을 갖고 있나?

- 어떤 데이터를 사용자에게 보여줄까?

→ 기획 요구사항 예시

   - 사용자에게 상품 목록을 보여줘야 함

   - 정렬, 필터, 페이징 기능이 있어야 함

 

Step 2. 디자인 시안 확인

- 카드 형태로 보여줄지, 리스트 형태로 보여줄지?

- 어떤 요소가 시각적으로 강조되는가?

 

→ 컴포넌트 분해 예시

<ProductCard />
<FilterBar />
<Pagination />

 

 

Step 3. 데이터 흐름 설계

useEffect(() => {
  fetch('/api/products')
    .then(res => res.json())
    .then(setProducts)
}, [])

고려해야 할 점

- 로딩 중에는 어떤 UI를 보여줄까? (스피너 or Skeleton UI)

- 에러 발생 시 어떻게 대응할까?

- 상품이 0개일 경우에는 어떤 안내 메시지를 보여줄까?

 

 

Step 4. 상태 관리 설계 (React 기준)

상태 관리는 화면 전체 흐름을 통제하는 기준점입니다.

상태 항목	설명
products	상품 리스트 데이터
loading	로딩 여부 (true일 경우 로딩 UI 표시)
error	에러 메시지
selectedFilter	현재 선택된 필터 옵션
currentPage	현재 페이지 번호

 

Step 5. 컴포넌트 구조 설계

폴더 구조 예시

/pages
  └─ ProductListPage.tsx
/components
  ├─ ProductCard.tsx
  ├─ FilterBar.tsx
  └─ Pagination.tsx
/hooks
  └─ useProductList.ts

 

 

Step 6. 예외/경계 상황 처리

상황	처리 방식
네트워크 에러	“상품을 불러오는 중 문제가 발생했습니다” 메시지 표시
상품 0개	“조건에 맞는 상품이 없습니다” 표시
느린 API 응답	스피너 or Skeleton UI 처리
모바일 환경	카드 수 줄이기, 필터 UI 변경 등 반응형 대응

 

보이지 않는 상황도 의도적으로 설계하고 대비하는 것이 프론트엔드의 핵심

 

 

4. 프론트엔드 기술은 'UI + 인터랙션 + 데이터'의 세 축을 다룬다

역할	사용하는 기술	구체적 설명
UI 구성	HTML, CSS, Tailwind, Styled-Components	구조적이고 일관된 시각 설계
사용자 반응 처리	JavaScript, React, Vue	이벤트, 상태 변경 처리
데이터 통신	Axios, fetch, GraphQL	서버에서 데이터 받아오고 에러 처리
상태 관리	useState, Redux, Zustand	사용자 인터랙션과 화면 갱신 동기화
화면 전환	React Router, Next.js	SPA 구조와 URL 동기화
반응형 대응	CSS 미디어쿼리, vw/vh 단위	모바일/태블릿 레이아웃 설계
성능 최적화	React.memo, lazy loading	렌더링 최소화와 네트워크 절약
접근성	aria-label, 키보드 네비게이션	모든 사용자가 쓸 수 있는 UI 설계

 

5. 프론트엔드는 사용자 여정을 코드로 짜는 사람

하나의 화면을 만들기 위해 프론트엔드 개발자는 다음 흐름 전체를 고민합니다.

 

기획서 → UX 흐름 → 데이터 흐름 → 상태 흐름 → UI → 사용자 반응 → 예외 처리

이 모든 흐름을 유기적으로 연결하고,

사용자 경험이 끊기지 않도록 설계하고 구현하는 것이 프론트엔드 개발자의 일입니다.