📂 PSD 파싱하면서 마주친 문제들 정리

포토샵(PSD) 파일을 다루다 보면 단순히 레이어를 뽑는 걸 넘어서,
레이어 구조, 이미지 버퍼 이상, 텍스트 스타일 같은 부분에서 꽤 다양한 문제가 생깁니다.

실제로 부딪히면서 정리해둔 내용이라, 비슷한 상황에서 참고하시면 좋을 것 같아요.

---

✅ PSD 레이어 구조: 트리 vs 플랫

문제

PSD 파일의 레이어는 기본적으로 트리 구조입니다.
레이어 그룹(group) 안에 또 다른 레이어들이 들어있고, 또 그 안에도… 이런 식이에요.
그래서 그룹 내부까지 탐색하려면 보통 재귀가 필요합니다.

해결

@webtoon/psd 라이브러리는 psdFile.layers라는 플랫한 배열을 제공합니다.

• 모든 하위 레이어까지 포함돼 있고
• group도 일반 레이어처럼 순회할 수 있어서
• 그냥 for 문 하나로 끝납니다

for (const layer of psdFile.layers) {
  // group 내부까지 포함해서 전부 순회 가능
}

---

⚠️ 이미지 버퍼 크기가 안 맞는 문제

문제

보통 RGBA 버퍼는 width * height * 4 바이트여야 정상이죠.
그런데 간혹 이 길이가 맞지 않는 경우가 있습니다.

예를 들면:

• 마스크가 적용된 레이어
• 압축된 버퍼
• PSD 포맷 차이, 혹은 파서 문제

해결

일단 캔버스를 만들고, 가능한 범위까지만 복사한 뒤
모자라는 부분은 투명으로 채워서 처리했습니다.

const layerCanvas = document.createElement('canvas');
layerCanvas.width = layerWidth;
layerCanvas.height = layerHeight;
const ctx = layerCanvas.getContext('2d');

const imageData = ctx.createImageData(layerWidth, layerHeight);
const copyLen = Math.min(layerBuffer.length, imageData.data.length);

for (let i = 0; i < copyLen; i++) {
  imageData.data[i] = layerBuffer[i];
}

ctx.putImageData(imageData, 0, 0);
const dataURL = layerCanvas.toDataURL('image/png');

---

✍️ PSD 텍스트 스타일 → CSS로 변환하기

텍스트 스타일도 생각보다 신경 쓸 게 많습니다.
PSD에서 꺼낸 텍스트를 웹에 맞게 CSS로 변환할 때 참고한 매핑 내용입니다.

---

font-size

• 위치:
  StyleSheetData.FontSize (pt 단위)

• 변환:

  • 1pt = 1.333px (96dpi 기준)
  • TySh가 있으면 변형 행렬 계산 필요

---

line-height

• 위치:
  StyleSheetData.Leading (pt)
• 변환:
  lineHeightEm = (LeadingPt * 1.333) / fontSizePx

---

color

• 위치:
  FillColor.Values → [R, G, B, A] (0~1 float)
• 변환:

const rgba = values.map(v => Math.round(v * 255));
const cssColor = `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;

---

font-family

• 위치:

  • StyleSheetData.Font → 인덱스
  • ResourceDict.FontSet[n].Name → 실제 폰트명

---

font-weight / font-style

• 위치:

  • FauxBold: true면 bold
  • FauxItalic: true면 italic

---

text-align

• 위치:
  ParagraphSheet.Properties.Justification

• 값:

  • 0: left
  • 1: right
  • 2: center
  • 3: justify

---

letter-spacing

• 위치:
  StyleSheetData.Tracking (1/1000 em 단위)
• 변환:

const letterSpacingPx = (Tracking / 1000) * fontSizePx;
const letterSpacingEm = letterSpacingPx / fontSizePx;

---

text-transform

• 위치:
  FontCaps

• 값:

  • 0: normal
  • 1: small-caps
  • 2: uppercase

---

📌 요약표

스타일 속성	PSD 위치	변환 방식
font-size	FontSize (pt)	pt → px / TySh 적용
line-height	Leading (pt)	pt → px → em
color	FillColor.Values	0~1 float → rgba
font-family	Font + FontSet.Name	폰트 인덱스 매핑
font-weight	FauxBold	true → bold
font-style	FauxItalic	true → italic
text-align	Justification	0~3 → CSS 정렬
letter-spacing	Tracking	(Tracking / 1000) * fontSizePx
text-transform	FontCaps	0~2 → normal/small-caps/uppercase

---

마무리

PSD 파싱은 단순히 레이어를 뽑는 걸 넘어서,
파일 구조나 예외 케이스까지 고려한 처리가 중요합니다.

특히 텍스트 스타일 변환이나 이미지 버퍼 처리처럼,
이상한 케이스가 자주 나오는 부분은 직접 겪어봐야 감이 잡히는 것 같아요.

필요하신 분께 도움 됐으면 좋겠습니다 🙇
혹시 궁금한 점 있으면 댓글이나 DM 주세요!