포폴 웹페이지를 겨우 올렸는데요, 전부 큰 모니터로만 확인하면서 만들었더라고요ㅠㅠ 그러다 문득 해외 담당자분이 출퇴근길에 핸드폰으로 먼저 열어볼 수도 있겠다 싶으니까, 글자가 작게 뭉개지고 레이아웃 깨지는 게 자꾸 눈에 밟혀서요. 다들 모바일로 열리는 것까지 신경 써서 만드셨는지, 아니면 데스크톱 기준으로만 맞추셨는지 감이 안 와서 너무 궁금해요!
해외 포폴 링크, 담당자가 핸드폰으로 볼 것도 대비하시나요?
11.3 05:14조회수 0댓글 11
포폴 웹페이지를 올려두고 데스크톱에서만 확인하다가, 저도 비슷한 일이 있었거든요. 지원하면서 제 폰으로 링크를 한번 열어봤는데 케이스 썸네일 밑에 달아둔 설명 글자가 작게 뭉개져서 읽히질 않더라고요. 그때 좀 멈칫했습니다. 담당자분이 꼭 큰 모니터로 처음 본다는 보장이 없으니까요. 그래서 저는 완벽하게 반응형을 짜기보다, 폰으로 열었을 때 '첫 화면에서 글자가 그냥 읽히는지'랑 '이미지가 잘려서 중요한 부분이 사라지지 않는지' 이 두 가지만 제 폰에서 직접 확인해 두는 쪽으로 했어요. 정답은 아닌데, 적어도 처음 1~2 스크롤에서 인상이 깨지는 건 막아지는 느낌이라 마음이 조금 놓이더라고요. 혹시 작업하신 페이지, 폰으로 한 번 직접 열어 스크롤해 보셨는지 조심스레 여쭤봅니다.
출퇴근길 핸드폰이라는 상상, 그 감각이 정확하세요. 결론부터요. 데스크톱 기준으로만 맞추면 못 보고 넘기는 게 아니라, 깨진 첫 화면이 그 사람 안에서 기본값으로 굳어버리거든요. 저도 지원자 포폴 스무 개 넘게 받아 읽는데, 깨진 레이아웃 한 번 본 링크는 다시 열 때도 "아 거기" 하고 미리 거르게 되더라고요. 그래서 하나 되묻고 싶은 게 있어요. 지금 모바일에서 깨지는 화면이 '몇 개'인지 세보셨나요? 체감으로 "좀 작다"가 아니라, 폰으로 직접 열어서 글자 뭉개지는 구간·가로 스크롤 생기는 구간을 숫자로 적으면, 어디부터 손댈지가 깔끔하게 정해져요. 저는 결제 단계 손볼 때도 제 폰 먼저 열어두고 깨지는 지점부터 세거든요. 모니터는 그다음이고요 🙂
폰으로 직접 열어서 세보라는 말, 그제야 제대로 해봤거든요. 체감으로 "좀 작다"만 하다가 숫자로 적으니까 가로 스크롤 생기는 구간 3개, 글자 뭉개지는 케이스 스터디 썸네일 구간 2개로 딱 잡히더라고요. 그러니까 뭉개지는 썸네일부터 손대야겠다가 바로 정해졌어요ㅠㅠ 혹시 결제 단계 세실 때 가로 스크롤이랑 글자 뭉개짐 중에 어느 쪽부터 먼저 치세요?
결론부터요. 저도 글자 뭉개짐부터 칩니다. 가로 스크롤은 손가락이 한 번 밀면서 "여기 넘치네" 하고 넘어가는 불편으로 남는데, 뭉개진 썸네일은 담당자가 읽으려다 못 읽고 그 흐릿함이 그 케이스 전체 인상으로 굳어버리거든요. 스크롤은 지나가지만 뭉개짐은 기본값처럼 따라붙더라고요. 저도 결제 단계 셀 때 읽히는지부터 먼저 잡고, 스크롤 넘침은 그다음으로 뺐어요 🙂
둘 중 뭘 기준으로 맞추냐로 나누면 절반만 맞는 것 같거든요. 저는 커머스라 트래픽이 거의 모바일인데, 주문서 표기 한 줄도 큰 화면 말고 폰 폭에서 먼저 봅니다. 거기서 안 읽히는 줄은 데스크톱에서 아무리 깔끔해도 없는 거나 마찬가지거든요. 포폴도 레이아웃 깨지는 것보다, 폰에서 글자가 뭉개져서 '왜 그렇게 정했는지' 한 줄을 그냥 스킵하게 되는 게 더 비싼 비용입니다. 결과물 이미지는 축소돼도 남는데, 결정 기준 문장은 작아지면 안 읽히고 넘어가거든요. 저는 그래서 기준 폭을 눈대중 말고 제 폰 실제 뷰포트 값으로 박아두고, 그 폭에서 기준 한 줄이 끝까지 읽히는지만 봅니다. 다들 기준 폭은 어떤 값으로 두세요?
저도 눈대중으로 하다가 요즘은 제 폰 뷰포트 값인 390px로 박아두고 거기서만 확인하거든요. 결과물 이미지는 축소돼도 남지만 기준 문장은 작아지면 그냥 넘어간다는 말이 진짜 공감됐어요ㅠㅠ 저는 그 폭에서 '왜 그렇게 정했는지' 한 줄이 두 줄로 안 터지고 끝까지 읽히는지를 제일 먼저 보거든요. 그런데 커머스는 실유저 기기가 더 좁은 쪽도 많을 것 같은데, 그럴 땐 390 그대로 두세요 아니면 360처럼 더 좁은 값으로 잡으세요?
390은 제 폰이라 잡은 거지 기준이 아니거든요. 저는 폭을 눈이 아니라 접속 로그 실측에 못을 박습니다. 커머스는 모바일 트래픽 안에서도 360 이하 비중이 무시 못 할 만큼 잡혀서, 저는 주문서 총액·배송비 한 줄은 제일 좁은 값에서 먼저 봅니다. 390만 두면 그 아래서 터지는 줄이 안 보이거든요. 넓은 쪽은 거기서 안 깨지면 대체로 따라옵니다. 폭은 제 기기가 아니라 실유저 비중이 정하는 값으로 잡아두시는 게 안 잃습니다.
링크 하나 폰으로 미리 열어보실 때, 실내 책상 말고 일부러 창가나 밖에 나가서 한번 보시는 걸 권해드려요. 담당자분이 출퇴근길에 본다고 상상하셨잖아요, 그 환경이 생각보다 밝아서 저대비 회색 글씨 같은 건 거의 날아가거든요. 저는 편집 4년차인데, 교정쇄 뽑으면 꼭 실물을 폰으로 찍어 밝은 데서 한 줄씩 들여다보는 버릇이 있어요. 모니터에선 멀쩡하던 본문 자간이, 작은 화면에선 글자끼리 붙어서 뭉쳐 보이는 순간이 있더라고요. 그래서 데스크톱이냐 모바일이냐를 나누기보다, 저는 '본문 최소 크기'랑 '글자색 대비' 이 둘만 모바일 기준으로 한 번 더 확인하는 편이에요. 레이아웃이 깨지는 것보다, 사실 작게 뭉개지는 글씨가 더 먼저 눈에 밟히더라고요. 예린님이 이미 그 지점을 느끼셨다는 게 저는 반쯤은 해결된 거라고 봐요.
글자가 작게 뭉개진다고 하셨는데, 혹시 어느 뷰포트에서 뭉개지는지 수치로 잡아보셨나요? 결론부터 말하면 저는 "모바일 대응"을 감으로 하지 않고 브레이크포인트랑 최소 폰트 크기부터 박아두는 편이거든요. 7년 UI 하면서 핸드오프 스펙 잡을 때 본문 16px, 캡션 14px 밑으로는 안 내려가게 하한을 못 박아뒀어요. 담당자가 폰으로 먼저 여는 건 거의 확정값이라고 보는 게 맞습니다. 출퇴근길에 썸네일만 훑고 데스크톱은 안 켜는 경우가 더 많거든요. 그래서 저는 작은 화면을 "대비"가 아니라 기준 뷰로 놓고 시작했어요. 320~375px 폭에서 레이아웃이 안 깨지는 걸 먼저 확인하고, 거기서 통과하면 큰 화면은 거의 자동으로 따라오더라고요. 반대로 데스크톱 기준으로 맞추고 폰을 나중에 끼워넣으면 토큰이 8 배수에서 틀어지듯 레이아웃이 계속 어긋납니다. 실제 기기 하나로 한 번씩 열어보는 것까지는 꼭 넣으세요.
수치로는 제 폰 뷰포트인 390px에서 먼저 열어봤는데요, 거기서 케이스 스터디 썸네일 캡션이 12px까지 떨어지면서 뭉개지더라고요. 본문 16, 캡션 14 하한을 못 박아두신다는 말 듣고 저도 피그마 텍스트 스타일에 최소값을 토큰으로 걸어놨거든요. 그래서 320~375 기준 뷰로 먼저 통과시키라는 말이 진짜 와닿았어요. 혹시 그 하한 밑으로 어쩔 수 없이 들어가는 캡션은 아예 안 쓰시는 편인가요?
결론부터 말하면 하한 밑으로 떨어지는 캡션은 안 쓰는 게 아니라, 못 쓰게 토큰 하한을 깨는 순간을 "이건 캡션에 담을 정보가 아니다"는 신호로 읽습니다. 390에서 12px로 뭉개진다는 건 그 자리에 정보가 과적된 거거든요. 저는 그런 캡션은 본문으로 올리거나 썸네일 위 라벨로 분리해서 14 하한 안에서 버티게 합니다. 하한을 억지로 끼워 맞추면 다음 컴포넌트에서 또 틀어지니까, 320 기준에서 안 버티는 텍스트는 애초에 캡션 역할을 뺍니다.