07-리액트+피그마 퍼블리싱 과정 (1)

jje·2026년 2월 17일

개인 프로젝트

목록 보기

7/18

피그마 플러그인 사용

1차적으로 완성된 피그마 디자인을 퍼블리싱

이 작업은 피그마 플러그인으로 추출하기로 했다

Inspect - Export to HTML/CSS

플러그인을 설치하고 깃헙으로 로그인하면 사용준비 끝
플러그인 팝업을 열어놓고 프레임을 클릭하면

알아서 추출해주는데
리액트 + 테일윈드 조합으로 생성이 됐다
테일윈드는 데이지UI 같은 활용성 높은 라이브러리가 많기 때문에 꼭 사용해야하고

React를 사용해야하는 이유

플러그인에서 기본적으로 제공해주는 옵션이기도 하고
많은 사람들이 리액트를 사용하는 이유와 같은 이유로 리액트를 선택했는데

컴포넌트 기반 UI (조립식 개발)
피그마에서 만든 버튼, 헤더, 카드 등을 각각의 '부품(Component)'으로 만들고
한 번 만든 부품을 여러 페이지에서 재사용 가능
즉 디자인 일관성 유지
가상 DOM (빠른 화면 업데이트)
전체 페이지를 새로고침하지 않고, 변경된 데이터 부분만 골라서 바꿈
사용자가 버튼을 눌렀을 때 반응이 매우 빠름
사용자 경험(UX) 품질을 유지 (불필요한 로딩 제거)
방대한 생태계와 라이브러리
피그마 디자인을 코드로 옮길 때 필요한 도구(차트, 슬라이더, 아이콘 등)가 이미 다 만들어져 있음
전 세계 개발자들이 가장 많이 사용하여 문제 해결이 쉬움 (나한테서 발생한 오류에 대한 대처법이 1개라도 있을 확률이 높다)
결과적으로 개발 속도 향상
선언적 프로그래밍
"화면의 이 부분이 이렇게 보여야 한다"라고 상태만 정의하면 React가 알아서 그려줌
코드가 간결해지고 유지보수가 편함
복잡한 로직 관리 차단 (스파게티 코드 방지)
요약 및 핵심 정리
재사용성: 레고 블록처럼 화면을 조립함 올림
속도: 가상 DOM으로 필요한 부분만 바꿈 (자원 낭비 최소화)
커뮤니티: 모르는 건 구글링하면 다 나옴
효율성: 피그마 디자인과 매칭하기 좋음 (중복 작업 방지)

일단 기존 프로젝트와 리액트를 연결하는 방법 중
프로젝트 내부에 리액트 폴더를 넣어서 관리하는 방법을 선택했다

백엔드와 프론트엔드를 리포지토리 하나에서 관리할 수 있고
기능 하나를 새로 만들 때 서버와 화면 코드를 한번에 커밋할 수 있어서
코드 동기화 오류를 줄이고 버전 꼬임을 방지한다

메이븐을 통해서 리액트와 스프링 빌드를 한번에 처리하고
하나의 jar 파일만 나오기 때문에 서버에 올리기도 편하다

리액트 빌드 결과물을 스프링 스태틱 폴더로 보내서
웹서버 없이도 스브링서버 하나로 화면에 다 보여줄 수 있고

같은 도메인과 포트를 사용하게 되니까 권한거부 문제를 피할 수도 있다
쿠키나 세션 공유도 편리해지고 로그인 기능 구현할 때도 유리하다

리액트 설치 과정

리액트를 사용하려면 node.js 가 설치되어 있어야 한다

윈도우 - show view - 터미널 선택하고
로컬 터미널 옵션을 선택해서

node -v 라는 명령어를 입력했을 때

C:\Users\pc>node -v
'node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램,
또는 배치 파일이 아닙니다.

이건 설치가 안되어있다는 뜻이기 때문에 설치를 해야한다

node.js 다운로드 페이지

다운로드 버튼을 눌러주고
next 를 쭉쭉 눌러주다가 커스텀 셋업 페이지에서

Add to PATH 옵션이 있는걸 꼭 확인해준다
뭐 추가로 설치할거냐는 체크박스가 있는데 난 무시했고
next - install 누르면 설치를 해준다
설치가 끝나면 터미널을 한번 닫았다가 열어줘서 내 환경 업데이트를 해주고

그 다음은 진짜 리액트 설치
프로젝트 폴더에서 깃배쉬를 열어준다

명령어를 입력해서 제대로 설치 됐는지 확인 한번 해주고

npx create-react-app frontend
이게 리액트 생성 명령어

실행하면 설치 동의 질문이 뜨고 y 를 입력한 후 엔터

깃배쉬께서 설치중이시다
딴짓 하지 말고 가만히 기다리면 된다

다 끝났다면 이렇게 프로젝트 폴더 안에 프론트엔드 폴더가 생긴걸 확인할 수 있다

그리고 패키지 익스플로러에서 프로젝트 이름 우클릭 - refresh 로 새로고침 한번 해주면?

트러블 슈팅인 줄 알았는데

드디어 오류가 뜬 줄 알았는데
리액트 폴더의 데이터 양이 너무 많아서 sts 가 오류로 오해하는 경우이다

프로젝트 이름 우클릭 - properties
사진 참고해서 카테고리에 들어가서 파란색 박스로 표시한 부분 체크박스 해제

프로젝트에서 클린 한번 해주면 사라진다

이제 프론트엔드가 정상 작동 하는지 확인해야한다
깃배쉬에서 cd frontend 명령어 실행
이건 프론트엔드 폴더로 이동한다는 뜻이다

잘 이동된걸 확인했으면 npm start 명령어 실행

새 웹페이지가 뜨면서 리액트 로고가 뜨면 정상이라는 뜻이다

이제 여기까지가 퍼블리싱 준비 단계

visual studio code를 사용해야 하는 이유

개발환경을 분리하기 위해서 visual studio code 를 사용하기로 했다

sts 에서는 서버만 깔끔하게 관리하고
프론트 작업은 VS code 에서 따로 하기로 결정

vs code 를 선택하는 이유는 리액트 전용 도구들이 많기 때문이다
짧은 명령어로 리액트 기본 코드를 완성할 수 있고
수만개의 파일이 있는 프론트엔드 폴더를 sts 에서 한꺼번에 관리하면서 과부하를 주는 것 보다
프론트 전용으로 만들어진 프로그램을 사용해서 분리시키는 편이 내 속도 편하지 않을까