디자인과 개발 사이: 융합적 UX 테크니션이 되기

서로 다른 언어를 쓰는 사람들

“이건 기술적으로 불가능해요.” “아니, 이건 사용자 경험상 필수적인 요소예요.” “그럼 스프린트를 하나 더 추가해야겠네요.”

회의실에서 자주 들리는 이런 대화들. 디지털 애널리스트, 디자이너와 개발자가 마치 서로 다른 행성에서 온 것처럼 대화하는 모습을 지켜보며 나는 항상 답답함을 느꼈다. 한쪽은 픽셀 퍼펙션과 사용자 경험을 강조하고, 다른 쪽은 기술적 제약과 일정을 걱정한다. 그리고 한쪽은 통계수치를 가져다 주지만 이것을 그래서 어떤 목적으로 사용자 경험의 스토리에 활용하면 될 지 외계어로 이야기하고 있다. 그리고 그 사이에서 프로젝트는 점점 더 산으로 가버린다.

내가 디자인과 개발 사이에 서게 된 이유는 바로 이 간극 때문이었다. 순수미술과 컴공을 전공한 나는 분명 나는 UX 리서처라고 주구장창 이야기하지만 그 말은 개쌉무시 당하고 항상 개발자로 불린 지 10년째. 사실 VSC코드를 뚫어져라 쳐다본 날이 피그마를 건든 날 보다 더 많다.

(누차 말하지만 UX리서처랑 UI디자인이랑 UX엔지니어링이랑 UX디자인이랑 미묘하게 업무 중점은 다르다. 내가 스스로를 UX 디자이너라고 정하지 않고 UX 엔지니어/시각 디렉팅 테크니션이라 명하는 이유는 구현화와 플래닝에 필요한 데이터 조합 및 리서칭에 특화되어 있기 때문이다) 디자이너들이 무엇을 원하는지 이해하고 싶었고, 반대로 디자이너들에게는 기술적 제약을 잘 설명하고 싶었다. 그래서 피그마를 건들며 혼자 꾸준히 비쥬얼 디자인 작업을 하고, UX 원칙을 매번 스스로 업데이트하고, 디자인 시스템을 팔로우업 했다.

경계가 분리된 문화가 프로젝트를 망치는 방법

업계는 여전히 개발, 애널리틱스, 디자인 직무를 칼같이 분리하는 경향이 있다. “너는 코드만 짜”, “너는 디자인만 해”, “너는 데이터만 분석해”라는 식이다. 통합된 직무도 있긴 하지만 이 경우 코드를 전문적으로 하는 개발자와 디자인에 특화된 시각디자이너 사이에 소통을 원할하기 위한 조율자로서의 역활이 아니라 2명의 직무를 1명에게 떠넘기기 위한 덤탱이 포지션인 경우가 대부분이다. 하지만 이런 칸막이 문화가 어떤 결과를 낳는가?

  1. 끝없는 핑퐁 게임: 디자이너가 시안을 넘기면, 개발자는 “이건 구현하기 어려워요”라고 돌려보낸다. 다시 디자이너가 수정하면, 이번엔 “이렇게 하면 성능 이슈가 생겨요”라는 답이 돌아온다. 이 과정이 몇 번이나 반복되는지 모른다.

  2. 실현 불가능한 디자인: 기술적 제약을 모르는 디자이너들은 종종 현실적으로 구현하기 어려운 디자인을 제안한다. 결과적으로 나오는 제품은 원래 의도했던 디자인과 거리가 멀다.

  3. 사용자 경험 저하: 프로젝트에 참여하는 모든 멤버들이 (직무 무관하게) UX 원칙을 이해하지 못하면, 기술적으로는 작동하지만 사용하기 어려운 제품이 탄생한다. 버튼은 클릭되지만, 사용자는 그 버튼을 찾지 못하거나 버튼이 동작하는 구현 렌더가 스무스하지 않아 미묘한 스트레스를 받는다.

  4. 시간과 자원 낭비: 이런 소통 문제로 인해 프로젝트는 지연되고, 추가 작업이 발생하며, 팀의 사기는 저하된다.

융합적 역량이 UX 테크에 최적화된 이유

나는 디자인과 사용자 경험에 대한 깊은 관심을 가지고 있었다. 이 융합적 역량이 현대 UX 개발에 왜 필수적인지 설명하겠다:

1. 디자인(피그마)과 구현(리액트) 능력의 통합

피그마로 UI/UX를 디자인하고, 리액트로 그것을 실제 작동하는 제품으로 구현할 수 있다는 것은 엄청난 강점이다. 이는 단순한 기술적 능력을 넘어서는 문제다.

// 디자이너의 의도를 정확히 구현한 모달 컴포넌트의 예
const MediaModal = ({ isOpen, onClose, item }) => {
  // 모달이 열릴 때 스크롤 방지 (디자이너가 원하는 UX 개선)
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = ''; };
    }
  }, [isOpen]);

  // 애니메이션 효과 (디자이너의 요구사항)
  return (
    <div 
      className={`modal-backdrop ${isOpen ? 'fade-in' : 'fade-out'}`}
      onClick={onClose}
    >
      <div 
        className={`modal-content ${isOpen ? 'scale-in' : 'scale-out'}`}
        onClick={e => e.stopPropagation()}
      >
        {/* 컨텐츠 렌더링 */}
      </div>
    </div>
  );
};

많은 디자이너들이 픽셀 완벽성을 추구하느라 방향을 잃는 실수를 저지른다. 사실 이게 디자이너 개인의 잘못이라기 보단 그런 기대치를 디자인에 종용하는 여러 결정권자들의 입김도 꽤나 큰 비중을 차지할 것이다.

융합스킬 전문가는 디자인 의도를 실제 제품에 정확하게 반영하는 게 큰 강점이다. 실제 작동하는 프로토타입은 목업 1,000개보다 가치 있다.

2. 디자인-개발 간극 해소 능력

융합테크니션은 백엔드와 디자인 사이의 연결고리가 될 수 있다. 전통적으로 UX 디자인은 사이트맵, 와이어프레임, 사용자 플로우, 기능 명세서와 같은 아티팩트와 연관되어 있지만, 내 기술적 이해는 이러한 아티팩트를 실제 구현 과정에서 발생하는 질문에 답하고 필요에 따라 수정하는 데 도움을 준다.

애자일 개발 방식에서는 UX 디자이너들이 여러 활동을 동시에 처리해야 한다:

  • 디자인과 사용자 활동을 선행 주기에 진행
  • 다음 주기에는 구체적인 디자인에 대한 질문에 답하고 구현 피드백을 기반으로 수정
  • 이전 주기의 구현을 평가

개발지식과 UX 리서칭을 혼합한 능력으로 다져진 시야를 가진다는 것은 이러한 애자일 프로세스에 원활하게 통합될 수 있는 중요한 역량이다. 좋은 개발은 단지 코드를 작성하고 처리하는 것만이 아니라 좋은 UX에 관한 것을 같이 고민하는 것이다.

3. 문제 해결 능력 및 사용자 중심 사고

UX 디자인은 사용자의 행동을 관찰하고 사회적, 인지적 트리거를 식별하여 디자인을 “더욱 몰입하게” 만들고 중독성을 높이는 심리학적 기술을 활용한다. UX 디자인에 대한 관심은 이러한 심리학적 측면에 대한 이해를 바탕으로 사용자에게 가치 있는 경험을 제공하는 데 도움이 된다.

UX는 “사람들의 니즈를 충족시키려 한다”는 점에서 중요하다. “사용자 중심 디자인(User-Centered Design, UCD)“의 기본 원칙인 사용자의 정신 모델을 이해하고, 제품이 사용자가 필요로 하는 것을 제대로 수행하는지 확인하는 데 집중한다.

“좋은 디자인은 혁신적이지만 유용성을 희생해서는 안 된다”는 원칙을 이해하고, 인터페이스가 사용자에게 “생각하게 만들지 않도록” 명확하고 직관적으로 작동하도록 설계한다.

실제 프로젝트에서의 융합적 접근 사례

최근 내가 참여한 MotionGallery(100DaysUIs) 프로젝트에서 이러한 융합적 접근이 어떻게 성공적인 결과를 가져왔는지 공유하고 싶다.

문제 상황

이 프로젝트에서는 썸네일 클릭 시 다양한 미디어(이미지, 비디오, iframe, 외부링크)를 모달로 띄우는 기능을 구현해야 했다. 기존 코드베이스는 다음과 같은 문제가 있었다:

  1. 타입 중복: GalleryItem의 type과 media.type이 중복되어 혼란과 타입 에러 발생
  2. 빈 문자열 타입: type: '' 등 불필요한 값으로 인한 타입스크립트 에러
  3. 모달 컴포넌트 스타일: 외부 라이브러리 없이 애니메이션과 UI를 구현해야 함
  4. 데이터 구조 불일치: 외부 링크, 미디어 없는 아이템 등 다양한 케이스 처리 필요

융합적 접근 방식

이 문제를 해결하기 위해 나는 디자이너와 개발자 양쪽의 관점에서 접근했다:

  1. 디자인 관점: 사용자 경험을 최우선으로 고려하여 모달의 애니메이션, 닫기 방식, 다양한 미디어 타입 처리 방법을 설계했다.

  2. 개발 관점: 타입스크립트의 타입 시스템을 활용하여 데이터 구조를 단순화하고, React와 Tailwind CSS만으로 모달 애니메이션을 구현했다.

// 개선된 데이터 구조
interface GalleryItem {
  id: string;
  title: string;
  // type 필드 제거!
  media?: {
    type: 'image' | 'video' | 'iframe';
    url: string;
  };
  link?: string;
}

// 디자인과 개발 관점이 융합된 모달 컴포넌트
const MediaModal: React.FC<MediaModalProps> = ({ item, isOpen, onClose }) => {
  // UX 개선: ESC 키 처리 및 스크롤 방지
  useEffect(() => {
    if (!isOpen) return;
    
    const handleEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    
    document.addEventListener('keydown', handleEsc);
    document.body.style.overflow = 'hidden'; // 스크롤 방지
    
    return () => {
      document.removeEventListener('keydown', handleEsc);
      document.body.style.overflow = ''; // 스크롤 복원
    };
  }, [isOpen, onClose]);

  // 미디어 타입별 렌더링 로직
  const renderMedia = () => {
    if (!item.media) {
      return item.link ? (
        <a href={item.link} target="_blank" rel="noopener noreferrer">
          외부 링크로 이동
        </a>
      ) : (
        <p>미디어 정보가 없습니다.</p>
      );
    }

    switch (item.media.type) {
      case 'image':
        return <img src={item.media.url} alt={item.title} className="max-h-[80vh]" />;
      case 'video':
        return <video src={item.media.url} controls autoPlay className="max-h-[80vh]" />;
      case 'iframe':
        return <iframe src={item.media.url} className="w-full h-[80vh]" title={item.title} />;
 
      default:
        return <p>지원하지 않는 미디어 타입입니다.</p>;
    }
  };

  if (!isOpen) return null;

  return (
    <div 
      className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4 transition-opacity duration-300"
      onClick={onClose}
    >
      <div 
        className="bg-white rounded-lg p-4 max-w-4xl w-full transform transition-all duration-300 scale-100"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-xl font-bold">{item.title}</h3>
          <button 
            onClick={onClose}
            className="text-gray-500 hover:text-gray-700 transition-colors"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="flex justify-center">
          {renderMedia()}
        </div>
      </div>
    </div>
  );
};

결과

이 융합적 접근 방식은 다음과 같은 결과를 가져왔다:

  1. 코드 품질 향상: 타입스크립트 에러가 해결되고, 데이터 구조가 단순화되었다.
  2. 사용자 경험 개선: 모달 애니메이션이 부드러워지고, 키보드 접근성이 향상되었다.
  3. 개발 속도 향상: 디자인과 개발 사이의 소통 비용이 줄어들어 개발 속도가 빨라졌다.
  4. 유지보수성 향상: 명확한 타입 정의와 컴포넌트 구조로 향후 유지보수가 용이해졌다.

융합적 UX 테크니션으로서의 역할

내가 생각하는 융합적 UX 테크니션의 역할은 다음과 같다:

  1. 번역가: 디자이너의 언어를 개발자의 언어로, 개발자의 언어를 디자이너의 언어로 번역한다.
  2. 중재자: 디자인과 개발 사이의 갈등을 중재하고, 양쪽의 제약과 요구사항을 조율한다.
  3. 교육자: 디자이너에게는 기술적 제약을, 개발자에게는 UX 원칙을 교육한다.
  4. 혁신가: 기술과 디자인의 경계를 넘나들며 새로운 가능성을 모색한다.

결론: 칸막이를 허물어야 할 때

업계가 개발, 애널리틱스, 디자인 직무를 칼같이 분리하는 관행은 이제 시대에 뒤떨어진 접근 방식이다. 복잡한 디지털 제품을 만들기 위해서는 이러한 칸막이를 허물고, 융합적 사고를 가진 인재들이 필요하다.

내 경험에 따르면, 가장 성공적인 프로젝트는 디자이너가 코드를 이해하고, 개발자가 UX 원칙을 이해하며, 모두가 사용자 중심으로 생각할 때 이루어진다. 이것이 바로 내가 디자인과 개발 사이에 서 있는 이유이며, 융합적 UX 테크니션으로서의 내 가치다.

우리는 더 이상 “당신은 코드만 짜세요” 또는 “당신은 디자인만 하세요”라는 말을 해서는 안 된다. 대신, “우리 함께 사용자를 위한 최고의 경험을 만들어봅시다”라고 말해야 한다. 그리고 그 과정에서 융합적 역량을 가진 사람들이 그 어느 때보다 중요한 역할을 할 것이다.