9월이 되면 SNS에는 개학길 교통체증 자랑하는 사람 아니면 이력서 자랑하는 사람뿐입니다. 제 사촌 여동생은 올해 4학년인데, 며칠 전 새벽에 스크린샷을 보내왔어요. 30군데 넘게 지원했는데 읽은 곳도 몇 없고 면접은 그림자도 못 봤다고 하더군요. 포트폴리오를 보내달라고 해서 열어봤더니 페이지는 꽤 깔끔했어요. 너무 깔끔해서 문제였죠. 마치 맹물 같아서 보고 나면 아무것도 기억나지 않았거든요.
사실 많은 학생들이 이 지점에서 막힙니다. 실력도 나쁘지 않고 레이아웃도 정돈되어 있는데, 포트폴리오에 '기억 포인트'가 없는 거죠. 면접관은 하루에 수십 개를 보기 때문에 눈이 이미 피로합니다. 해야 할 일은 페이지를 꽉 채우는 게 아니라, 디테일에서 살짝 밀어줘서 시선이 내 작품 위에 2초 더 머물게 하는 것입니다. 그림자는 가장 저렴하고 가장 빠르게 효과를 보는 그 밀어주기입니다.
그림자 한 겹을 얕보지 마세요. 카드 아래에 조금 넣으면 평면에서 '떠오르고', 버튼 옆에 조금 넣으면 손가락이 아직 닿지 않았는데도 누를 수 있을 것 같은 느낌이 들고, 프로필 사진에 조금 넣으면 전체 윤곽이 살아납니다. 이건 콘텐츠를 뺏지 않으면서도 면접관에게 조용히 말해줍니다. 이 사람은 디테일에 감각이 있다고요.
그런데 box-shadow를 직접 쓰는 건 정말 고통스럽습니다. 파라미터가 잔뜩 있고, x 오프셋, y 오프셋, 블러 반경, 스프레드 반경, 색상 투명도까지, 값 하나만 바꿔도 카드 전체 느낌이 달라집니다. 예전에 카드 그림자 하나 조정하는데 스무 번 넘게 시도하다가 결국 포기하고 기본값을 썼어요. 나중에 'CSS 그림자 생성기'라는 작은 도구를 발견했는데, 슬라이더를 드래그하면 실시간으로 효과를 볼 수 있고, 왼쪽에서 조정하면 오른쪽에서 미리보기, 만족하면 코드를 바로 복사할 수 있었습니다. 그 느낌은 마치 수동 창문을 전동 창문으로 바꾼 것 같았어요.
구체적으로 어떻게 쓸까요? 도구를 열고 먼저 그림자 유형을 고릅니다. 일반 드롭 섀도, 내부 그림자, 또는 다중 레이어叠加. 그 고급스러운 떠 있는 느낌을 만들려면 보통 두세 겹을 쌓아야 합니다. 크고 연한 한 겹은 환경광 역할, 작고 진한 한 겹은 접촉 그림자 역할입니다. 색상은 순수 검정을 쓰지 말고 진한 파랑이나 진한 회색을 쓰고, 투명도는 10%에서 20% 사이로 눌러야 결과가 숨 쉬는 듯합니다. 블러 반경은 크게, 스프레드 반경은 작게 또는 음수로 주면 가장자리가 더 깔끔하게 정리됩니다.
포트폴리오에서 어디에 넣을 만할까요? 첫 화면의 메인 카드에는 부드러운 외부 그림자를 넣어 배경에서 튀어나오게 합니다. 프로젝트 목록의 썸네일에는 약한 내부 그림자를 넣어 액자처럼 들어간 느낌을模拟합니다. 내비게이션 바가 상단에 고정될 때는 하단에 얇은 그림자를 넣어 사용자에게 '나 여기 있어요'라고 알려줍니다. 모달, 드롭다운 메뉴, 플로팅 버튼도 그림자가 자주 쓰이는 영역입니다. 하지만 한 가지 원칙을 기억하세요. 한 페이지 안에서 그림자의 '성격'은 통일되어야 합니다. 전부 단단한 짧은 그림자이거나, 전부 부드러운 넓은 그림자이거나, 섞으면 안 됩니다.
어떤 학생은 너무 많이 넣으면 지저분해 보일까 걱정합니다. 사실 판단 기준은 간단합니다. 눈을 가늘게 뜨고 봤을 때 그림자가 콘텐츠의 주인공을 뺏으면 과한 것이고, 눈을 감았다가 다시 떴을 때 페이지 층위가 분명하고 주객이 확실하면 맞는 것입니다. 그림자는 콘텐츠를 위한 것이지 기술 자랑용이 아닙니다.
추계 채용에서 실력은 패지만, 이력서와 포트폴리오는 노크입니다. 벽돌이 보기 좋으면 문이 더 빨리 열립니다. 10분만 CSS 그림자 생성기로 포트폴리오의 핵심 요소를 조정해보세요. 힘들지 않지만 면접관이 화면을 넘길 때 손가락이 멈출지도 모릅니다. 멈춰야 그가 내 코드 뒤에 있는 것을 볼 기회가 생깁니다.
11월에 와서 9월에 안 고친 걸 후회하지 마세요. 지금 바로 슬라이더를 두 번 드래그해보세요. 정말로, 이력서 열 장 더 넣는 것보다 효과 있습니다.