클로드 면접
고경은 프론트엔드 모의면접 정리
Part 1. 질문과 답변
Q1. Next.js App Router 구조 이해
질문: 동원그룹 홈페이지 작업에서 Next.js App Router 기반이었는데, Pages Router와 비교했을 때 App Router의 구조적 차이(서버 컴포넌트/클라이언트 컴포넌트 구분, 라우팅 방식 등)를 실제 작업하시면서 어떻게 체감하셨나요? 특히 어떤 부분에서 기존 퍼블리싱 방식과 다르게 접근해야 했는지 궁금합니다.
답변: 동원그룹 프로젝트는 제가 앱 라우터 구조를 처음 설계한 것은 아니고, 기존 구조를 파악해 퍼블리싱과 UI 수정을 담당했습니다. 페이지 라우터가 페이지 파일 중심이라면 앱 라우터는 앱 폴더의 중첩 라우팅과 레이아웃을 통해 공통영역을 관리한다는 차이가 크게 느껴졌습니다. 또 기본이 서버 컴포넌트라서, 상태나 이벤트 처리, GSAP, 프레이머 모션처럼 브라우저에서 동작하는 기능은 클라이언트 컴포넌트로 분리해야 했습니다. 기존 퍼블리싱처럼 페이지별 HTML을 완성하기보다 컴포넌트 구조와 서버/클라이언트 경계를 먼저 확인한 뒤 마크업과 인터랙션을 나눠 작업했습니다.
Q2. 서버/클라이언트 컴포넌트 경계 설계
질문: "use client"를 컴포넌트 최상단에 선언하면 그 하위에 임포트되는 모든 컴포넌트도 클라이언트 컴포넌트로 동작하게 되는데, 실제 작업하면서 이 경계를 어디에 둘지 고민했던 구체적인 사례가 있나요? 예를 들어 GSAP 인터랙션이 들어간 섹션을 서버 컴포넌트 트리 안에 최소한의 범위로 격리하려면 어떻게 접근하시나요?
답변: 상위 page와 레이아웃은 서버 컴포넌트로 유지하고 KV 영역을 프레이머 모션 기반의 클라이언트 컴포넌트로 구성했습니다. KV에서는 애니메이션뿐 아니라 배너 슬라이드 상태 관리, 터치 이벤트, window와 resizeObserver 같은 브라우저 API를 사용해야 해서 "use client"가 필요했습니다. 다만 기능별로 완전히 분리한 구조라기보다는, 브라우저 동작이 집중된 KV 섹션 단위로 클라이언트 경계를 설정했습니다. 더 최적화한다면 배너 데이터 조회는 서버에서 처리하고, 실제 인터랙션이 필요한 부분만 더 작게 분리할 수 있습니다.
Q3. OAuth 인증과 토큰 저장/보안
질문: 자라다의원 프로젝트에서 Supabase로 소셜 로그인 3종(네이버·카카오·구글)을 직접 구현하셨는데, OAuth 인증 흐름에서 토큰(access token, refresh token)은 어디에 저장하셨나요? 그리고 그 저장 방식을 선택한 이유와, 만약 XSS 공격을 고려한다면 어떤 점을 신경 쓰셨는지 설명해주세요.
답변: AI에게 먼저 전체 구현 계획을 세우게 하고, 그 순서에 따라 Supabase와 각 소셜 플랫폼 설정을 진행했습니다. 코드가 필요한 부분은 별도로 요청해서 직접 적용하고 기능 테스트까지 했으며, 인증과 보안 코드는 백엔드 개발자에게 검증받은 뒤 오픈했습니다. 다만 토큰 저장 방식 같은 세부 인증 구조는 제가 직접 설계한 부분은 아닙니다.
Q4. 웹접근성 및 크로스브라우징 실무 대응
질문: 웹접근성, 크로스브라우징 실무 경험을 구체적으로 설명해주세요. 체크리스트/기준, 스크린리더나 키보드 내비게이션 대응 이슈와 해결 방법은?
답변: 더제이에서 LG OLED 사이트의 웹접근성 인증 대응에 참여해 웹접근성 마크를 받은 경험이 있습니다. LG 스토리홈에서도 시맨틱 태그와 제목 구조, 이미지 alt에 제품명·모델명을 넣는 기준을 적용했고, 셀렉트에는 레이블과 aria 속성을 연결했습니다. 폰트는 vw로 반응형 처리하되 11px 이하로 작아지지 않도록 했고, tab 키로 모든 기능에 접근할 수 있는지 확인했습니다. NVDA 스크린 리더기를 직접 설치해 대체텍스트·버튼·셀렉트·포커스 이동이 올바르게 읽히는지 테스트했습니다. 크로스브라우징에서는 사파리 border-radius 영상 모서리 노출 문제를, 부모요소에 border-radius + overflow: hidden으로 해결했습니다.
Q5. (제외됨)
퍼블리싱 가이드라인 구축 관련 질문. 본인 요청으로 이력서 항목 및 질문 스킵.
Q6. 이벤트 버블링과 이벤트 위임
질문: 이벤트 버블링과 이벤트 위임(delegation)을 설명하고, 실무에서 반복 UI 요소에 이벤트 위임을 활용한 경험이 있는지 말씀해주세요.
답변: 이벤트 버블링은 자식요소에서 발생한 이벤트가 부모요소까지 전달되는 현상이고, 이벤트 위임은 이를 활용해 부모에 이벤트를 한 번만 등록한 뒤 event.target이나 closest()로 실제 클릭된 자식을 구분하는 방식입니다. 반복/동적 목록에서는 이벤트 등록 수를 줄이고 새 요소에도 대응할 수 있다는 장점이 있습니다. 다만 React 배너 슬라이드나 탭에서는 각 요소에 onClick을 연결하는 방식이 많았고, 이벤트 위임을 의도적으로 적용한 경험은 제한적입니다.
Q7. React 리렌더링 최적화
질문: memo, useCallback, useMemo 등 리렌더링 최적화 경험과 실제 개선 사례를 말씀해주세요.
답변: 성능 최적화를 깊게 진행한 경험은 아직 많지 않지만, 상태 영향 범위를 줄이려고 했습니다. 동원그룹 메인에서는 팝업 상태를 해당 비즈니스 컴포넌트 안에 두어 팝업 개폐 시 필요한 영역만 리렌더링 되도록 구성했습니다. 재무정보 탭은 현재 네 개 탭 콘텐츠를 모두 렌더링하고 display로 노출을 바꾸는 구조인데, 다시 개선한다면 선택된 탭만 조건부 렌더링해 Highcharts 등 불필요한 렌더링을 줄일 수 있다고 봅니다. memo/useMemo는 실제 성능 문제를 확인한 뒤 적용해야 한다고 이해하고 있으며, 반복 렌더링되거나 계산량이 큰 부분에서만 사용합니다.
Q8. LG전자 스토리 페이지 - 데이터 구조화 작업
질문: AI 챗봇 학습용 크롤링, Structured Data(JSON) 파싱, 전처리 가이드라인 작성 — 실제로 어떻게 하셨나요?
답변: 전처리 가이드는 100% 본인이 작성한 게 아니라, LG 가이드 문서에 맞춰 스키마를 어떻게 정리할지 엑셀로 만든 것입니다.
꼬리질문: 크롤링은 어떤 방식으로 하셨나요?
답변: 정리한 엑셀(스키마)을 AI에게 학습시키고, HTML을 주고 JSON 코드를 만들어달라고 요청한 뒤 QA를 거쳐, HTML head 태그 안에 script 태그로 JSON을 삽입했습니다. (별도의 크롤링 스크립트를 작성한 것은 아니며, AI를 활용한 변환 작업이었음)
Q9. 블렌드엑스 BX ONE 1 MVP - AI API 연동 구조
질문: AI 서버 API는 어떤 형태로 연동했나요? "전체 흐름을 단독 설계"가 실제 API 명세까지 정의한 것인지, 이미 정해진 API를 연결만 한 것인지?
답변: API 명세서까지는 필요 없는 프로젝트였습니다. 브라우저에서 설문 형태로 답변을 받아 AI에게 전송하면 AI가 자체 프롬프트로 데이터를 처리해 다시 API로 응답을 받고, 그 데이터로 HTML 보고서를 만들었습니다. 추가로 pdf-lib 라이브러리를 활용해 동일 데이터를 PDF 보고서로도 추출되도록 작업했습니다.
Q10. 뉴날(Newnal) - GSAP 인터랙션과 성능
질문: 가장 까다로웠던 인터랙션과 사용한 GSAP 기능, 브라우저별 GSAP 이슈는?
답변: GSAP 자체가 브라우저별로 크게 다르게 동작한 문제는 없었습니다. 다만 사파리나 저사양 환경에서 이미지 프레임 로드가 늦어 회전이 끊겨 보일 수 있어, 61장의 이미지를 애니메이션 실행 전 미리 로드했습니다. 위치 이동은 top/margin 대신 transform의 y와 scale을 사용했고, PC·모바일에서 스크롤 구간과 움직임이 자연스러운지 실제 브라우저로 확인했습니다.
Q11. 롯데홈쇼핑 - 디자인 시안 우선순위 조정
질문: 기획자/디자이너가 결정할 영역처럼 보이는 "우선순위 조정"을 실제로 어떻게 하셨나요?
답변: 기획자가 없었고, 디자이너가 20명 넘게 있는데 퍼블은 1명, PM도 1명이라 PM 혼자 모든 일정을 조율하기 어려운 구조였습니다. 본인이 작업해야 할 이벤트를 리스트업해서 롯데홈쇼핑 담당자와 마감 날짜를 직접 조율하고, 그 안에 디자인을 받을 수 있도록 디자이너와 커뮤니케이션했습니다. 우선순위 1순위는 마감 날짜, 마감이 같으면 롯데 담당자와 조율.
꼬리질문: 마감이 겹치고 담당자가 "둘 다 급하다"고 버틴 경우 어떻게 하셨나요?
답변(1차): 야근해서 둘 다 해줬습니다.
후속 질문: 야근이 아닌 방식으로 해결한 경험은?
답변(보완): 야근이 잦은 프로젝트는 아니었고, 웬만하면 제시간에 맞추려 했습니다. 정말 둘 다 급한 경우 저에게 업무를 전달하는 롯데 담당자들이 대부분 같은 부서였기 때문에, 두 담당자끼리 조율할 수 있도록 설득했습니다.
Q12. TypeScript 스킬 검증
질문: 스킬 목록에 TypeScript가 있는데 프로젝트 경력기술서에는 언급이 없습니다. 실무 사용 경험이 있나요?
답변: 학습 중인 단계입니다.
Q13. 백엔드/서버개발, Android, iOS 스킬 검증
질문: 이 세 스킬과 관련된 프로젝트 언급이 없는데, 실제 경험이 있나요?
답변: 스킬 목록에서 뺐습니다. 직접 개발 경험은 없지만, 아웃스프링 자체 서비스 앱 프로젝트에 투입되어 앱에 애드몹(AdMob)을 추가하고, 플레이스토어·앱스토어 런칭 과정을 AI와 자료 조사를 통해 진행해본 경험은 있습니다.
Q14. 그누보드, Vue.js 스킬 검증
질문: 두 스킬 모두 프로젝트에 등장하지 않는데 실제 경험은?
답변: Vue.js는 스킬에서 뺐습니다. 그누보드는 실제 프로젝트 작업 경험은 없지만, 퍼블리싱을 처음 시작할 때 그누보드로 포트폴리오를 만든 경험이 있고, 신화캐슬·더제이가 PHP 기반 홈페이지였어서 PHP 코드 작성 경험이 있어 지금도 바로 작업 가능한 수준입니다.
Q15. gulp.js 빌드 도구 검증
질문: gulpfile.js를 직접 작성해 Sass 컴파일, 이미지 최적화, 라이브 리로드 등을 구성해본 경험이 있나요?
답변: 더제이에서 LG OLED 빌드 도구로 gulp를 사용했습니다. Sass 컴파일, 다국어 폴더별 배포, JS 압축, SCSS map 등의 기능을 사용했습니다.
Q16. 더제이 - SEO 및 데이터 기반 운영 체계
질문: OLED Space 사이트의 SEO/태깅 강화, 데이터 기반 운영 체계 구축 — 구체적으로 어떤 작업을 하셨나요?
답변: GA와 GTM을 활용해 클릭 이벤트 태깅을 적용했습니다. 페이지별로 측정이 필요한 CTA 버튼을 지정하고, 클릭 시 click_button이라는 이벤트명과 함께 버튼 문구·이동 URL을 dataLayer에 전달했습니다. 버튼 문구는 분석하기 좋은 형태로 정리했고, 실제 링크가 없는 # 값은 빈 값으로 처리했습니다. 이후 GA에서 콘텐츠별 CTA 클릭 데이터를 확인할 수 있도록 수집 여부를 검수했습니다.
Q17. SENSEE 쇼핑몰 및 대표페이지
질문: 간략소개에 이름만 언급되고 경력기술서에는 상세 항목이 없는 프로젝트 중 하나를 설명해주세요.
답변: SENSEE는 회사가 사라져서 사이트 확인은 불가능하지만, 워드프레스 기반 쇼핑몰이었고 메인페이지 수정 및 전체적인 쇼핑몰 관리를 담당했습니다. 회사소개 대표페이지는 어드민이 필요 없는 페이지라 퍼블리싱으로만 작업했습니다.
꼬리질문: 쇼핑몰 자체를 처음부터 만드신 건가요, 이어받아 운영하신 건가요?
답변: 이미 있던 워드프레스 쇼핑몰을 이어받아 운영했습니다. (→ "구축"이 아니라 "운영"이 정확한 표현)
Part 2. 이력서 수정 반영 사항
2-1. 아웃스프링 역할 요약 (4개 불릿)
- 퍼블리싱 실무 리드 및 프로젝트별 페이지/컴포넌트 구조 파악·정리
- 기획 초기 단계부터 참여해 HTML5·SCSS·JavaScript(React·Next.js 포함) 기반 퍼블리싱 수행, 기존 코드 구조 분석 후 서버/클라이언트 컴포넌트 경계 설계 및 인터랙션 구현
- 디자이너·개발자·기획자·클라이언트와 실무 커뮤니케이션 및 요구사항 조율
- 반응형·웹접근성(스크린리더 테스트, ARIA 적용)·SEO·크로스브라우징 이슈 대응 기반 퍼블리싱 품질 관리
2-2. 경력기술서 - LG전자 CMS 운영 (LGE.COM 스토리 페이지)
역할: 타 팀 이관 프로젝트를 인수받아 퍼블리싱·배포를 운영하고, 이후 AI 챗봇 학습용 Structured Data 구축을 위해 LG 가이드 문서를 기반으로 스키마를 정리하고, AI 도구를 활용해 스토리 페이지 HTML을 JSON으로 변환한 뒤 QA를 거쳐 head 영역에 JSON-LD 형태로 삽입한 퍼블리셔 메인
성과: 타 팀 이관 프로젝트 운영 공백 없이 인수, AI 챗봇 학습 데이터셋 구축 기여, LG 가이드 기반 스키마 정리 및 AI 활용 JSON-LD 변환 프로세스 구축
2-3. 경력기술서 - 우리금융경영연구소 기후금융포털
역할: 반응형 그리드와 공통 컴포넌트를 설계하고, GSAP 기반 인터랙션과 크로스브라우징 대응을 수행했으며, 외주 품질 이슈를 확인해 직접 재작업을 진행한 퍼블리싱 (※ "총괄" 표현 삭제, 면접에서 역할 범위 질문 대비 필요)
2-4. 경력기술서 - 자라다의원(jarada.kr)
역할: 디자인 시안 기반 Framer 퍼블리싱, 회원관리·게시판 UI 구현, Supabase 연동 설계를 주도하고, 소셜로그인 등 인증 로직은 AI 도구 활용 및 백엔드 개발자 검증을 거쳐 적용
성과: 퍼블리싱·프론트엔드 로직은 단독 수행, 인증 보안은 외부 검증 병행 / 반응형(PC·모바일) UI/UX 구현 완료 / 배포 후 유지보수 지속 대응 중
2-5. 간략 소개 (전체 반영본)
웹 에이전시 더제이에서 LG OLED 및 삼성 투자자 정보 홈페이지를 운영하며 실무 역량을 다졌습니다. 특히 OLED Space 사이트 개선을 통해 SEO 및 태깅 체계를 강화하고, 데이터 기반 웹사이트 운영 체계를 구축하였습니다. 신화캐슬에서는 헬로우드림 사이트를 운영했고, 백엔드·프론트엔드·퍼블리셔·디자이너로 구성된 팀에서 신규 부업 사이트 '드림투유'의 이벤트 페이지 퍼블리싱을 담당해, 런칭 후 1주일 만에 매출 2억원을 달성한 프로젝트에 참여했습니다.
이후, 창업 4년 차 웹에이전시 스타트업 '아웃스프링'에 첫 번째 개발자로 입사한 이후 현재까지 별도의 리더 없이, 프로젝트 착수 시 회의와 요구사항 조율을 직접 진행하고, 외주 개발자와 협업 시 필요한 내용을 파악해 소통하며, 팀원 역량에 맞춰 프로젝트를 배치하고, 이슈 발생 시 회사와 커뮤니케이션해 해결해왔습니다.
현재까지 다음과 같은 다양한 프로젝트를 담당하며, 기획자, 디자이너, 퍼블리셔, 클라이언트와 커뮤니케이션하여 성공적으로 오픈되었습니다.
Hanwha SPACE HUB 운영, Hanwha 불꽃축제 공식 홈페이지 운영, SENSEE 쇼핑몰 운영 및 대표페이지 구축, 코스모스 울릉도 프로젝트 구축, 우리금융경영연구소 기후금융포털 구축, 롯데홈쇼핑 운영, 킵어스 및 한화 고구마런 랜딩페이지를 작업하였습니다.
현재는 한국방송통신대학교 컴퓨터과학과에 재학하며 실무 경험과 이론을 함께 쌓고 있습니다. 퍼블리싱 경험을 기반으로 React, Next.js 등 프론트엔드 역량을 확장하고 있으며, 사용자 경험과 유지보수성을 함께 고려하는 개발자가 되는 것을 목표로 하고 있습니다.
2-6. 스킬 목록 조정
- 삭제: Vue.js, 백엔드/서버개발, Android, iOS
- 표기 조정 필요: TypeScript → "학습 중"으로 별도 표기하거나 스킬 목록에서 제외
- 유지(근거 확인됨): 그누보드(PHP 경험 기반), gulp.js(더제이 LG OLED 빌드 프로세스 경험)
종합 피드백
실무 경험에 기반한 구체적이고 솔직한 답변이 강점입니다. 특히 본인이 직접 하지 않은 부분(OAuth 토큰 설계, 전처리 가이드라인 100% 작성, LG전자 크롤링, 매출 성과의 직접적 인과관계)을 명확히 구분해서 답한 점, 그리고 스킬 목록 중 실제 경험이 뒷받침되지 않는 항목(TypeScript, Android/iOS, Vue.js, 백엔드/서버개발)을 스스로 걸러낸 점은 면접 준비 태도로서 매우 긍정적입니다.
다만 아직 상세 항목이 없는 프로젝트(Hanwha SPACE HUB, 불꽃축제, 코스모스 울릉도, 킵어스, 고구마런)는 면접 전 최소한 역할·기술·성과를 한두 문장으로라도 정리해두는 것이 좋습니다. 또한 "총괄", "단독 수행", "구축" 같은 강한 동사를 사용한 문구는 실제 관여 범위와 정확히 일치하는지 한 번 더 점검하고, 필요하면 후속 질문에 대한 답변을 미리 준비해두시길 권합니다.
