Showing Posts From

이거

개발자: '이거 구현 어려운데요' vs 디자이너: '근데 이게 꼭 필요한데...'

개발자: '이거 구현 어려운데요' vs 디자이너: '근데 이게 꼭 필요한데...'

오후 2시, 핸드오프 미팅 회의실에 들어갔다. 개발자 민준씨가 이미 앉아있다. "디자인 공유드립니다." 피그마 화면을 띄웠다. 30초 만에 나왔다. 그 말. "이거 구현 어려운데요." 아직 컴포넌트 설명도 안 했는데. 숨을 참았다. "어떤 부분이요?" "이 인터랙션이요. 스크롤하면서 헤더가 반투명해지면서 블러 들어가고, 동시에 높이도 줄어드는 거. 퍼포먼스 이슈 있어요." 3일 걸렸다. 이 인터랙션 하나에. 레퍼런스 10개 찾고, 프로토타입 5번 만들었다. 대표님 피드백도 3번 반영했다. "근데 이게 꼭 필요한데..." 내 목소리가 작아진다. 매번 그렇다.필요하다는 말의 무게 "왜 필요한데요?" 민준씨가 묻는다. 공격적이지 않다. 진짜 궁금한 거다. 이럴 때 당황한다. "사용자 경험이..." "구체적으로요?" 막힌다. '감각적이니까', '애플도 이렇게 하니까'는 이유가 안 된다. 개발자들한테는. "스크롤할 때 컨텍스트를 유지하면서도 콘텐츠 영역을 확보하려고요. 헤더가 줄어들면 사용자가 어디 있는지 알면서도 더 많은 정보를 볼 수 있잖아요." "그럼 그냥 숨기면 안 돼요? 더 간단한데." 아니지. 그건 아니야. "완전히 숨기면 네비게이션 잃어버려요. 다시 위로 가려고 할 때." "위로 스크롤하면 다시 나타나게 하면 되는데." "그것도 구현 어렵잖아요." 민준씨가 웃는다. "그것도 어렵긴 한데, 블러보단 낫죠."타협의 기술 "블러 빼면 되나요?" "투명도 애니메이션만 남기면 훨씬 가볍죠." 피그마로 돌아갔다. 블러를 뺐다. 30초 만에 끝났다. 3일 걸린 디테일이. "이 정도면?" "이건 할 만해요." 기분이 묘하다. 다 무너진 것 같으면서도, 뭔가 배운 것 같기도 하고. "근데 디자이너님." "네." "이 그라데이션은요. 8개 스탑이 꼭 필요해요? 3개면 안 돼요?" 화면을 봤다. 미묘한 그라데이션이다. 레이어 블렌드 모드도 썼다. Overlay에 Multiply 겹쳤다. "육안으로 구분 안 되는데." 민준씨 말이 맞다. "차이 나는데요." "디자이너님 눈에만요." 할 말이 없다. 맞는 말이니까. "3개로 줄일게요." "색상 코드만 주시면 제가 리니어 그라데이션으로 처리할게요." 또 배운다. 리니어 그라데이션이 퍼포먼스에 좋다는 걸. 피그마에서는 몰랐던 거다.꼭 필요한가 회의가 끝났다. 원래 디자인의 60%쯤 남았다. 블러 없어지고, 그라데이션 단순해지고, 애니메이션 타이밍도 조정했다. 내 방으로 돌아왔다. 피그마를 켰다. '핸드오프_최종.fig'를 '핸드오프_최종_최종.fig'로 저장했다. 원본 파일을 열었다. 블러 있는 버전. 예쁘다. 확실히 예쁘다. 근데 민준씨 말대로, 사용자가 알까. 블러가 있고 없고를. 그라데이션이 8스탑이고 3스탑이고를. 모를 거다. 아마. 그럼 이건 뭐지. 내가 3일 동안 한 건. 자기만족? 아니다. 그건 아니야. 디테일이 쌓여야 전체가 좋아지는 거니까. 근데 구현 안 되면 의미 없는 거니까. 다음 날 아침 슬랙이 왔다. 민준씨: "어제 헤더 구현 완료했어요. 스테이징 서버 확인해보세요." 링크를 눌렀다. 개발 서버가 떴다. 스크롤을 내렸다. 헤더가 줄어든다. 투명해진다. 블러는 없다. 그라데이션도 단순하다. 근데. 나쁘지 않다. 아니, 좋다. 생각보다 훨씬 좋다. 움직임이 부드럽다. 퍼포먼스 때문에 오히려 더 자연스럽다. 피그마에서 볼 때는 몰랐던 거다. 실제 디바이스에서, 실제 콘텐츠에서, 실제로 스크롤하면서 보니까. 민준씨한테 메시지를 보냈다. "좋은데요." "그죠? ㅎㅎ 블러 없어도 괜찮죠?" 괜찮다. 솔직히. "근데요." "네." "스크롤 속도 빠를 때 애니메이션이 좀 끊겨요." "아 그거요. 쓰로틀 걸어서 그래요. 성능 때문에." "디바운스는요?" "디바운스 쓰면 반응이 늦어져요." 또 배운다. 쓰로틀과 디바운스의 차이. "그럼 easing 커브를 조정하면 어떨까요? ease-out 말고 custom cubic-bezier로." "오. 그거 괜찮을 것 같은데. 값 알려주세요." 피그마로 갔다. 모션 섹션을 열었다. cubic-bezier(0.4, 0.0, 0.2, 1) "이거요." "오케이. 적용해볼게요." 3주 후, 배포 기능이 라이브됐다. 사용자 피드백이 들어오기 시작했다. "헤더 애니메이션 부드러워요." "스크롤 경험 좋아졌네요." 블러 얘기는 없다. 그라데이션 스탑 개수도. 당연하다. 애초에 모르니까. 근데 기분이 나쁘지 않다. 이상하게. 민준씨가 slack에 남겼다. "디자이너님, 이번 협업 좋았어요. 다음에도 잘 부탁드려요." "저도요. 많이 배웠어요." 진심이다. 블러 없어도 된다는 걸. 8스탑이 3스탑 돼도 된다는 걸. 완벽한 디자인보다 실제로 작동하는 디자인이 낫다는 걸. 근데. 어제 밤 새 프로젝트를 시작했다. 프로덕트 리스트 페이지. 카드에 hover하면 이미지가 확대되면서 블러가 들어간다. 손이 멈췄다. 민준씨 목소리가 들린다. "이거 구현 어려운데요." 블러를 뺐다. 그냥 scale만 넣었다. 마우스를 올려봤다. 심심하다. 다시 블러를 넣었다. 값을 줄였다. 8px에서 4px로. duration도 줄였다. 400ms에서 250ms로. 테스트했다. 나쁘지 않다. 이 정도면 민준씨도 할 만하다고 할 거다. 아마. 저장했다. '리스트_v1_개발고려.fig' 파일명이 웃긴다. '개발고려'. 예전엔 없던 접미사다. 근데 이제는 자연스럽다. 결국 디자인과 개발 사이. 완벽과 현실 사이. 이상과 타협 사이. 어디선가 만난다. 매번 다른 지점에서. "이거 구현 어려운데요." "근데 이게 꼭 필요한데..." 이 대화는 계속된다. 앞으로도. 근데 이제는 안다. '꼭 필요한 것'의 정의가 계속 바뀐다는 걸. 타협이 포기가 아니라는 걸. 함께 만드는 게 혼자 만드는 것보다 낫다는 걸. 민준씨가 또 메시지를 보냈다. "디자이너님, 다음 주 새 기능 핸드오프 미팅 잡을까요?" "네. 근데 이번엔 제가 먼저 여쭤볼게요." "뭐요?" "구현 가능한지요." "오. 좋은데요. 그럼 초안 공유해주세요. 미리 볼게요." 피그마 링크를 보냈다. 댓글 권한도 줬다. 1시간 뒤, 댓글이 달렸다. "이 부분 구현 어려울 것 같은데, 이렇게 바꾸면 어떨까요?" 대안 제시였다. 비판이 아니라. 클릭했다. 민준씨가 직접 수정한 버전이다. 나쁘지 않다. 오히려 더 나을 수도. "좋은데요. 이걸로 갈게요." "ㅎㅎ 그럼 이번엔 쉽겠네요." 회의실이 아니라 피그마에서 만났다. 싸우기 전에 협력했다. 이게 맞다. 이게. 6개월 전과 지금 6개월 전에는 몰랐다. 개발자가 '어렵다'고 하면 내 디자인을 무시하는 줄 알았다. 내가 '필요하다'고 하면 고집부리는 걸로 보일까 봐 걱정했다. 핸드오프 미팅이 두려웠다. 내 디자인이 깎여나가는 시간이니까. 지금은 안다. '어렵다'는 '불가능하다'가 아니다. '같이 다른 방법 찾자'는 뜻이다. '필요하다'고 말해도 된다. 근거만 있으면. 핸드오프는 협상이 아니다. 협업이다. 민준씨도 변했다. 요즘은 먼저 물어본다. "이거 왜 이렇게 디자인하셨어요?" 궁금해서 묻는 거다. 트집 잡으려는 게 아니라. 나도 묻는다. "이거 구현하려면 뭐가 필요해요?" 알고 싶어서다. 이해하려고. 어제 점심 민준씨랑 같이 밥 먹었다. "요즘 디자인 공유하실 때 구현 난이도 표시해주시잖아요." "네. 도움 돼요?" "많이요. 우선순위 정하기 쉬워요." 빨강, 노랑, 초록으로 표시한다. 빨강: 구현 어려움, 대안 논의 필요 노랑: 구현 가능하나 시간 필요 초록: 쉬움 "근데요." "네?" "가끔 빨강인데 꼭 필요한 거 있잖아요." "그죠." "그거요. 말씀해주세요. 왜 필요한지만 설명해주시면, 방법을 찾아볼게요." 민준씨가 웃는다. "힘들어도요?" "힘든 건 괜찮아요. 의미 있으면." 의미. 그 단어가 좋다. "저도요. 쓸데없는 디테일은 이제 안 넣어요." "쓸데없는 거 없던데요?" "있었어요. 많이." 둘이 웃었다. 지금 이 순간 피그마를 켰다. 새 프로젝트. 빈 캔버스. 마우스가 멈췄다. 예전엔 이랬다. '일단 최고로 예쁘게. 나중에 조정하면 되지.' 지금은 다르다. '실제로 만들어질 디자인. 처음부터 현실적으로.' 근데 타협이 아니다. 더 나은 디자인이다. 구현될 수 있는 디자인. 사용자가 실제로 경험할 디자인. 개발자와 함께 만들어갈 디자인. 컴포넌트를 만들기 시작했다. 이번엔 블러를 넣지 않았다. 처음부터. 대신 색상 대비를 높였다. 타이포그래피에 집중했다. 슬랙이 울렸다. 민준씨: "다음 주 핸드오프 기대되네요." 나도 기대된다. "이거 구현 어려운데요." 그 말이 이제는 반갑다. 함께 풀어갈 문제니까. "근데 이게 꼭 필요한데..." 이 말도 이제는 자신 있다. 이유를 설명할 수 있으니까.타협은 포기가 아니다. 함께 더 나은 답을 찾는 과정이다. 오늘도 핸드오프 미팅에서 배운다.