[TIL] 내일배움캠프 251211 - 그래서 이걸 why 배워야 하는 건데?

 

PM의 일이란 게 여러 메이커들과 함께 협업하며 문어발(?)처럼 걸쳐 있다 보니
배우는 입장에선 아직 이게 너무 헷갈린다..
특히 figma 를 했더니 생각이 생각을 물고 가서 더 그런 생각이(???)
차라리 안 배우고 부딪혔으면 또 달랐을 거 같은데
이론 먼저 배우려니 더 헷갈리는 것 같기도 ㅎㅎㅎ
그래도 다 빛을 발할 날이 오겠지! 

 

---

 

허어 피그마 챕터2 들어 오면서 재미가 없다....

이론은 지루하다

하지만 기초=쉽다 가 아니라 기초=중요한 것. 필수인 것. 이라고 하셨기에.. 응 당연함

 

리사이징, 프레임, 오토레이아웃 등.. 그래서 어디다 쓰는 거지 하고 있었는데 (나는 이게 너무 중요함. 이거를 WHY 배워야 해?)

실제로 결과물이 똑같아 보여도 동적 움직임이 다르기 때문에

어떤 부분을 반응형으로 움직여 줄 것인가? 를 결정하는 것이라고 한다.

💡여기서 잠깐

카페24에서 쇼핑몰 디자인 스킨을 살 때 MO, PC 를 각각 구매할 수도 있고

반응형을 구매하면 MO, PC 에서 다 적용이 되었었는데 그 반응형이 그 반응형이랑 같은 용어인가?;;;

GPT 에게 물어봄

 

결론 → 그니까 여기서 피그마의 반응형이란 것은 시안 같은 거임

반응형을 개발자에게 (이렇게 구현해달라고) 설명해줘야 되는데,

그걸 PPT로 하면 어떻게 설명하겠음

그걸 피그마로 개발자가 쉽게 이해하도록 설명해주고 개발자는 코드로 구현을 하는 거지
그리고 갖다 박기 쉽게 피그마에서 css/이미지를 제공해줌.

 

---

 

 

 

다르다고 함.

 

---

 

 

피그마에서 “반응형 시안(Responsive design mockup)”을 만드는 이유는 개발 단계에서 실제로 반응형 웹을 구현할 수 있도록 ‘설계도’를 제공하기 위함입니다.
즉, 피그마에서 만드는 반응형 시안은 그 자체가 반응형 웹이 되는 것이 아니라,
개발자가 반응형을 구현할 수 있게 도와주는 디자인 가이드 역할을 한다는 점이 핵심입니다.

아주 구체적으로 설명해드리겠습니다.

---

1. 피그마 반응형 시안을 만드는 목적은 “개발∙협업∙확장성” 때문이다

목적 1) 개발자가 반응형 웹을 만들 때 기준이 필요하기 때문

개발자는 이렇게 묻습니다.

• PC 기준일 때 폭은 몇 px?
• 모바일 화면에서는 어떤 요소가 접히는지?
• 버튼은 어떻게 늘어나야 하는지?
• 텍스트 길이가 길어지면 어떻게 처리해야 하는지?
• 이미지 영역은 어떤 비율을 유지해야 하는지?

피그마에서 반응형 시안을 만들면
개발자가 CSS로 반응형을 구현할 때 명확히 기준을 알 수 있습니다.

즉, 피그마는 개발을 위한 "청사진"입니다.

---

2. 어디에 쓰이나? 실제 사용 사례 5가지

1) 개발 인수인계 및 프론트엔드 구현 기준 제공

개발자가 다음을 CSS로 구현할 때 피그마 시안이 기준점이 됩니다:

• 브레이크포인트 정의 (예: 1280px / 960px / 768px / 480px)
• 레이아웃 변화 정의 (예: 3단 → 2단 → 1단)
• 컴포넌트의 확장/축소 규칙
• 마진/패딩/그리드 기준

즉, “이 화면이 줄어들면 이렇게 변화하라”는 명세서 역할을 하는 것.

---

2) QA(테스트) 단계에서 ‘정상 동작 여부’ 확인 기준

QA팀이 웹사이트 테스트할 때,

• 버튼 길이가 늘어났을 때 디자인대로 행동하는지?
• 글 길이가 길어질 때 UI가 무너지는지?
• 모바일 전환 시 배치가 잘 바뀌는지?

이런 것들을 피그마 반응형 시안과 비교하며 오류를 찾습니다.

---

3) 클라이언트∙PM에게 디자인 의도 설명

PC만 만들면 PM이 이렇게 물어봅니다

• “모바일에서는 어떻게 보여요?”
• “화면 줄이면 왜 디자인 깨져요?”
• “요소가 겹치면 어떤 방식으로 정리될 예정인데요?”

이때 피그마 반응형 시안이 있으면
디자이너가 의도를 정확히 전달할 수 있습니다.

---

4) 컴포넌트 재사용성을 높여서 유지보수를 쉽게 만듦

오토레이아웃과 반응형 규칙을 정확히 적용해두면

• 버튼 수정 → 모든 화면에 자동 반영
• 카드 컴포넌트 수정 → 여러 프레임에서 자동 반영

즉, 변화가 반복되는 프로젝트일수록
피그마 반응형 시안은 작업량을 줄여주는 설계 방식입니다.

---

5) 디자이너가 UI 깨짐을 직접 검증할 수 있음

디자인만 예쁘게 만들어놓고 실제 개발에서 깨지면 이런 일이 생깁니다

• 버튼 안 텍스트 길이 변경 → UI 깨짐
• 이미지 비율 변경 → 비정상적으로 잘림
• 다양한 기기에서 레이아웃 이상해짐

피그마 반응형 시안을 만들면
디자이너가 개발자보다 먼저 문제를 발견하고 수정 가능합니다.

---

3. 그렇다면 “실제 웹처럼 자동으로 변환되냐?”

아니지만,
개발자가 그대로 구현 가능한 ‘반응형 동작 모델’을 만드는 것입니다.

피그마는 디자인 툴이고,
웹의 진짜 반응형은 CSS에서 구현됩니다.

피그마 시안은 개발자가 CSS에서 구현해야 하는 동작을 디자인으로 표현하는 것입니다.

---

4. 요약

피그마 반응형 시안은 어디에 쓰임?	개발 기준, QA 기준, 협업 설명, 컴포넌트 재사용, UI 안정성 검증
이게 실제 반응형 웹을 자동으로 만드는가?	아니다. 개발자가 CSS로 구현해야 한다.
그래도 왜 필요한가?	없으면 개발이 멋대로 해석하고, 레이아웃이 깨지고, 유지보수가 어려움.

---

5. 아주 간단한 비유

피그마 반응형 시안
= 건축 설계도에서 “지진 나면 건물이 이렇게 버티도록 설계해라”라고 적는 것.

웹 반응형
= 실제 건설사(개발자)가 설계도대로 진짜 건물을 짓는 단계.

 

 

 

 

---

 

 

 

 

디자이너 → 개발자 

그리고 포토샵과의 차이도 궁금

 

Figma는 디자인을 개발자가 바로 구현할 수 있는 형태로 자동 변환해주고, 프로젝트 전체의 색·간격·규칙을 통일해서 관리할 수 있게 해주는 도구입니다.

 

 

1. 개발자는 결국 디자인을 코드로 넣어야 한다 

웹이나 앱은 결국 다음의 형태로 생성됩니다

• HTML 구조
• CSS 스타일
• JavaScript 동작
• 이미지(icons, banners, photos 등)

여기에 디자인(색, 크기, 간격, 형태)을 그대로 반영해야 하죠.

즉, 디자인 → 코드 반영은 당연히 맞습니다.

그런데 여기서 중요한 질문이 있죠:

"그 디자인 이미지는 어디서 만들어지지?"

---

2. 디자이너들이 무엇으로 작업하느냐?

정답:

요즘 거의 90% 이상은 피그마(Figma)로 UI 디자인을 만든다.

이유:

• 화면 구성(UI layout)을 만들기 가장 적합
• 오토레이아웃이나 컴포넌트 구조 등 “반응형 디자인”을 만들기 쉬움
• 개발자에게 넘기면 개발자가 CSS 값, 여백, 폰트, 색상 등을 직접 확인 가능
• 이미지, 아이콘을 바로 Export해서 개발자가 써먹을 수 있음
• 협업이 매우 빠름 (실시간 수정 가능)

그래서 피그마는 시연용이 아니라 디자인 작업의 메인 도구입니다.

---

3. 그러면 포토샵(Photoshop)은 왜 쓰지?

포토샵은 UI 전체를 만드는 도구가 아니라, 이미지 편집·보정·합성 전문 도구입니다.

디자이너가 다음 작업을 할 때 포토샵을 사용합니다:

• 제품 사진 보정
• 배너용 이미지 제작
• 그림자/질감/합성 이미지 작업
• 고해상도 랜딩 페이지용 비주얼 제작
• 촬영 사진 색보정

그리고 **그 결과물(이미지 파일)**을 피그마로 가져와서
UI 화면에 배치해서 사용하는 방식입니다.

즉:

• UI 레이아웃 디자인 = 피그마
• 이미지 편집 = 포토샵
• 일러스트·아이콘 = 일러스트레이터(AI)

이렇게 역할이 분리됩니다.

---

4. 개발자는 피그마에서 무엇을 가져가는가?

개발자는 피그마에서 직접

• 색상 코드(hex, rgba)
• 폰트 크기, line-height
• 간격(px)
• 너비/높이
• border-radius
• 컴포넌트 구조
• 이미지 export (.png, .svg 등)

모두 확인할 수 있습니다.

즉 개발자는 피그마를 열고 “디자인 요소를 직접 뽑아가는” 방식입니다.

그래서 요즘은 디자이너가 ZIP 이미지 폴더를 주는 경우가 거의 사라졌습니다.
피그마가 그 역할을 모두 해주기 때문입니다.

디자이너가 따로 문서를 만들어서
“여기 간격 16px이고, 색상은 #333이고, radius는 8px이에요”
라고 정리해서 넘길 필요가 없다는 뜻입니다.

Figma 파일 안에서 요소를 클릭하기만 하면 개발자는 바로 아래와 같은 값을 볼 수 있습니다.

• 간격(Spacing: 8px, 16px 등)
• 색상(Color: #000000, rgba 값 등)
• 모서리 둥글기(Radius: 8px 등)
• 텍스트 스타일(font-size, line-height 등)

즉, Figma는 디자인을 개발자가 바로 사용 가능한 데이터 형태로 바꿔서 보여주는 기능을 갖고 있습니다.

 

---

5. 그럼 피그마는 시연용인가?

아니다. 피그마 = 디자인 결과물 + 시연 + 개발 가이드 + 협업까지 전부 하는 현대 UI/UX 올인원 툴.

피그마의 역할은 크게 3가지입니다.

1) 디자인 결과물을 만드는 도구 (핵심 기능)

• 화면 디자인
• 반응형 컴포넌트
• 스타일 가이드
• 아이콘 배치
  모두 피그마에서 완성.

2) 인터랙션 시연 (Prototype)

• 버튼 클릭하면 다음 페이지 넘어가는 동작 시연
• 모달 열리고 닫히는 시연
  PM·개발자·클라이언트에게 “이렇게 동작할 거예요” 설명 가능.

3) 개발자 전달 기능 (Dev Mode)

• 개발자가 손으로 보던 spec 문서 대신 피그마에서 바로 코딩 가능할 정도로 정보 제공.

 Figma 안에서 디자인 규칙(토큰)까지 관리할 수 있다.

 

이건 디자인 시스템과 연결되는 개념인데, 쉽게 설명하면

• 프로젝트 전반에서 반복적으로 쓰는 색
• 버튼에 쓰는 여백
• 카드의 radius 값 등

이런 것들을 **하나의 규칙 세트(변수)**로 만들어두면,

1. 디자이너는 일관된 UI를 빠르게 만들 수 있고
2. 개발자는 동일한 규칙을 그대로 코드로 옮길 수 있어
3. 서로 불일치나 오류가 적어진다

이 규칙들을 Figma에서는 스타일 / 컴포넌트 / 토큰 시스템으로 관리할 수 있다는 뜻이었습니다.

 

 

---

 

 

 

 

 

 

이것도 궁금했음

PM은 디자이너와 개발자에게 각각 뭘(어떤 문서를) 줘야 하는지?

 

디자이너에게 줄 문서 

1. 기획서 (Notion/Docs)
2. User Flow (FigJam)
3. 와이어프레임(필요 시)
4. 디자인 요구사항 정리

개발자에게 줄 문서 

1. 기능 명세서 (Notion/Docs)
2. API 명세서 (개발자가 만들 수도 있음)
3. Figma 최종 디자인 + Dev Mode
4. QA 테스트 문서 (QA 담당자가 할 수도 있음)

---

 

하나의 이벤트 페이지가 어떤 식으로 구성되는지..?

프로모션 페이지 전체가 이미지였던 거 같은데..

쿠폰 버튼 텍스트까지 다 정해서 디자인 요청 넘겨줬던 거 같음

근데 우리 히든 기획전할 때는 쿠폰이랑 내가 셋팅했는데

쿠폰을 먼저 발급 받은 다음에 → 그걸 프로모션 페이지로 들고 와서 쿠폰 번호를 어떤 식으로 넣었는지 기억이 안 남..

하 퇴사한지가 너무 오래 되어서 이런 게 기억이 안 난다 ㅠㅠㅠㅠ

어차피 그런 세세한 프로모션 페이지까지 PM이 기획하는 게 아니라

PM은 홈화면의 레이아웃, 프로모션의 큰 레이아웃 이런 걸 기획할 거기도 하고

정말 회바회라 어떤 어드민과 툴을 쓰느냐에 따라 달라서 기억할 필요가 없는데

괜히 기억이 안 나니까 매우 답답함..

다음엔 회사 일에 대해서 보다 더 잘 기록해 두자.. 

 

---

 

서비스기획 입문 강의를 어제 완강해서 오늘은 한 번 더 짚티랑 같이 정리를 해 봤다.

문제 정의할 때 필요한 템플릿도 만들어 봤다 (아직 그대로 써 보진 않음ㅎㅎ..)

어차피 다음 주부터 또 개인 과제 시작이라 너무 힘 주지 않으려 한다

내 페이스는 누구도 책임져 주지 않음.. 

남 눈치 보지 말고, 남이 어떻게 하는지 신경 쓰지 말고 (스트레스 받지 말잔 뜻)
내 페이스는 내가 지키자