두 가지 방식
프로필 사진처럼 결과 모양이 정해져 있으면 원형·정사각 틀은 고정하고 사진을 끌고 핀치 줌으로 맞추는 방식이 쉬워요. 게시물 사진처럼 자유롭다면 상자 모서리 손잡이를 끄는 방식이 좋고, 손잡이는 파히와 동료들(2006)의 엄지 크기를 지켜요. 사진은 시스템 사진 선택기(Android Developers, n.d.)로 가져오면 권한 요청 없이 시작할 수 있어요.
좋은 시작점과 미리보기
수와 동료들(2003)은 중요한 부분을 중심으로 자동 자르면 알아보기 쉬워진다고 했어요. 얼굴을 찾아 틀 가운데에 놓고 시작하면 손볼 일이 줄어요. 윌리스와 토도로프(2006)처럼 사람은 얼굴 인상을 순식간에 판단하니, 채팅 목록 크기의 아바타 미리보기를 함께 보여줘요. 3분할 격자는 끄는 동안만 보여주고, 결과는 캔버스의 drawImage로 만들어요(MDN, n.d.).
되돌리기와 접근성
편집 화면은 취소와 완료를 분명히 두고(Apple, n.d.), '초기화'와 실행 취소로 언제든 원본으로 돌아가게 해요. 원본은 지우지 말고 자르기 정보만 저장하면 나중에 다시 자를 수 있어요. 끌기가 어려운 사람을 위해 WCAG 2.2(W3C, 2023) 2.5.7에 맞춰 확대·축소 버튼, 비율 버튼, 화살표 이동을 둬요.
자주 묻는 질문
- 프로필 사진은 어떤 방식이 좋나요?
- 원형 틀을 고정하고 사진을 끌고 확대해 맞추는 방식이 가장 쉬워요.
- 원본은 지워도 되나요?
- 원본과 자르기 값을 따로 저장하면 나중에 다시 편집할 수 있어 좋아요.
출처 검토일: 2026-10-27
참고문헌
- MDN Web Docs. (n.d.). CanvasRenderingContext2D: drawImage() method. 원본의 일부 영역을 잘라 그리는 캔버스 메서드라, 웹에서 자른 결과를 만들 때 참고하면 도움이 돼요.
- Android Developers. (n.d.). Photo picker. 권한 없이 사진을 고르는 시스템 선택기라, 자르기 전에 사진을 가져오는 단계에 참고하면 도움이 돼요.
- Apple. (n.d.). Photo editing. Human Interface Guidelines. 편집 화면의 취소·완료와 미리보기 원칙이라, 자르기 화면 구성을 정할 때 참고하면 도움이 돼요.
- Suh, B., Ling, H., Bederson, B. B., & Jacobs, D. W. (2003). Automatic thumbnail cropping and its effectiveness. In Proceedings of UIST '03 (pp. 95–104). ACM. https://doi.org/10.1145/964696.964707 중요 부분을 중심으로 자동으로 자르면 알아보기 쉬워진다는 연구라, 초기 자르기 위치를 정할 때 참고하면 도움이 돼요.
- Willis, J., & Todorov, A. (2006). First impressions: Making up your mind after a 100-ms exposure to a face. Psychological Science, 17(7), 592–598. 얼굴 첫인상이 0.1초 만에 생긴다는 연구라, 프로필 사진 자르기 미리보기가 중요한 이유로 참고하면 도움이 돼요.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 엄지 타깃 크기 연구라, 자르기 상자 모서리 손잡이 크기를 정할 때 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 끌기 대안(2.5.7)과 대비 기준이 있어, 비율 버튼과 손잡이 대비를 정할 때 참고하면 도움이 돼요.