개발자
백엔드 지망생입니다 사이드프로젝트 하려고 하는데 피그마로 디자인하고 해당 코드추출해서 프론트로 대체가 가능한가요?? 백엔드 api랑 피그마로 뽑은 웹사이트코드랑 연동이 되나요? 피그마는 디자인하는용도는 알겠는데 왜코드로도 배포가 가능한지? 혹시 이걸 프론트로대체가 정말 가능한건지.. 아니면 걍 부트스트랩이용하는게 더빠른지 알려주시면 감사하겠습니다
답변 1
안녕하세요. 현직 백엔드개발자(라고 쓰고 필요하면 프론트로도 붙었다가 간단한 서버관리 등 디자인만 빼고 다하는)입니다. 백엔드를 만들다보면 콘솔에만 찍히는 리턴값만으로는 사이드 프로젝트로 어디 보여주기 힘들긴 하겠습니다. 질문에 하나씩 답변드릴게요. Q. 피그마로 디자인하고 해당 코드추출해서 프론트로 대체가 가능한가요?? A. API를 통해 받은 데이터를 가공하여 알맞은 엘리먼트를 제공하거나 값을 보여주는 비동기식 작동은 불가능하므로 결론적으로 불가능 합니다. Q.백엔드 api랑 피그마로 뽑은 웹사이트코드랑 연동이 되나요? A.제가 알기로는 피그마가 가지고 있는 기능으로는 안됩니다. 피그마를 통해 publish된 Html 코드를 베이스로 다시 Javascript는 작성하셔야하거나 리액트와 같은 프레임워크를 쓰신다면 추출한 Html코드를 컴포넌트단위로 쪼개서 다시 작업하셔야 합니다. Q.피그마는 디자인하는용도는 알겠는데 왜코드로도 배포가 가능한지? 혹시 이걸 프론트로대체가 정말 가능한건지.. 아니면 걍 부트스트랩이용하는게 더빠른지 알려주시면 감사하겠습니다 A. 피그마로 디자인을 하시고 부트스트랩을 설치하셔서 부트스트랩을 같이 이용하셔도 됩니다 . 피그마로 Export된 Html은 모두 Css로 작성되어 있습니다. 결론. 피그마를 통해 디자인 및 마크업 퍼블리싱 하신 후 준비된 백엔드 API와 연동하는 프론트엔드 작업은 별도로 진행하셔야 합니다. 도움이 되었길 바라며, 사이드 프로젝트 화이팅 하시기 바랍니다!
익명
작성자
2024년 06월 14일
진짜 하나하나 다 세세하게 알려주셔서 너무 감사합니다! 회사가서 선배님같은분 뵙게되면 너무 좋겠네요 앞으로 더 공부하겠습니다 좋은 하루 보내세요!!!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 06월 14일
피그마는 UI 디자인 툴로서, 웹사이트나 애플리케이션의 프론트엔드 디자인을 생성하고 수정하는데 사용됩니다. 그러나 직접적으로 실제 실행 가능한 코드를 생성하지는 않습니다. 대신 레이아웃, 패턴, 컬러 등의 CSS 정보를 제공하여 개발자들이 해당 디자인을 코드로 변환하는데 도움을 줍니다. 피그마에서 추출한 '코드'는 HTML과 CSS 스타일 가이드라고 보시면 됩니다. 이것을 바탕으로 실제 프론트엔드 개발을 해야 합니다. 따라서, 백엔드 API와 '피그마로 뽑은 웹사이트 코드'를 직접 연동한다는 것은 부적절합니다. 실제적으로 피그마 디자인에 기반한 프론트엔드 코드(예: React)를 작성하셔야 하며, 그렇게 작성된 프론트엔드와 백엔드 API를 연동해야 합니다. 부트스트랩을 사용할지 여부는 당신의 선택에 달렸습니다. 부트스트랩은 미리 정의된 다양한 컴포넌트들과 반응형 레이아웃을 쉽게 구현할 수 있기 때문에 개발 시간을 단축시키는 데 도움이 될 수 있습니다. 하지만 디자인의 자유도가 떨어진다는 단점도 있습니다. 따라서 프로젝트의 요구사항과 개인적인 선호에 따라 결정하면 됩니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!