Category: Interaction

  • 소프트웨어는 곧 문화

    소프트웨어는 곧 문화

    소프트웨어는 한때 우리와 동떨어진 존재처럼 느껴졌습니다. 유리창 너머에 효율적이고 순종적인 존재로 자리 잡고 있었죠. 그러다 우리 손안에 들어오게 되었습니다. 손가락으로 확대/축소하고, 스와이프하고, 탭하는 모든 동작 하나하나가 우리의 생각, 감정, 그리고 소통 방식을 바꿔놓았습니다. 한 세대에 걸쳐 소프트웨어와의 연결은 사용자 경험을 인간적인 경험으로 탈바꿈시켰습니다.

    이제 또 다른 변화가 다가오고 있습니다. 소프트웨어가 지능화되고 있는 것입니다. 고정된 상호작용 방식 대신, 학습하고, 적응하고, 반응하는 시스템을 구축하게 될 것입니다. 인터페이스는 실시간으로 진화하며, 우리의 필요와 행동 변화에 따라 형태를 바꿀 것입니다. 한때 정적이었던 것이 유동적이고, 적응력이 뛰어나며, 마치 살아있는 것처럼 변모할 것입니다. 우리가 어디로 향하고 있는지 이해하려면 과거를 되돌아보는 것이 도움이 됩니다. 지난 20년간 가장 영향력 있는 상호작용들을 되짚어보고, 현재 활동 중인 디자이너와 개발자들의 이야기를 통해, 하나의 디자인 결정이 어떻게 한 시대를 정의하게 되었는지, 그리고 우리가 오늘날 만드는 제품들이 어떻게 다음 세대를 형성해 나갈지 살펴볼 수 있습니다.

    지난 20년간의 상징적인 상호작용을 살펴보세요.

    스티브 잡스가 유명한 “누가 스타일러스를 원합니까?” 기조연설에서 손가락으로 이미지 크기를 조절했을 때, 그는 신체와 인터페이스 사이의 거리를 허물었습니다. 사용자들은 처음으로 손을 뻗어 화면 속 이미지와 웹페이지를 촉각으로 조작할 수 있게 되었습니다.

    멀티터치 시스템에 대한 연구는 1980년대부터 진행되어 왔지만, 애플 아이폰은 이를 대중 시장에 처음으로 선보였습니다. 아이폰은 탄력적인 경계, 저지연 손가락 추적, 실제 재료의 저항을 모방한 크기 조절 곡선과 같은 유사 햅틱 기술을 통해 핀치 투 줌 기능을 놀라울 정도로 촉각적으로 구현했습니다. 운동량, 마찰, 시각적 탄력성과 같은 이러한 미묘한 물리적 요소들은 휴대폰에 실제 햅틱 엔진이 탑재되기 훨씬 전부터 마치 물체를 만지는 듯한 느낌을 주었습니다. 이러한 기술 덕분에 핀치 투 줌은 우리가 손으로 직접 형태를 바꿀 수 있는 무한한 시각적 캔버스로서 인터넷을 이해하는 관문이 되었습니다. 이러한 변화는 우리가 세상을 살아가는 방식뿐만 아니라, 세상 속에서 우리의 위치를 ​​인식하는 방식까지도 바꾸어 놓았습니다.

    우리는 지도를 정적인 기록으로만 여기는 대신, 손가락으로 확대하여 새로운 식당, 상점, 체육관을 찾아냅니다. 이미지를 있는 그대로 받아들이는 대신, 확대하여 약혼반지를 자세히 보거나 포토샵으로 보정했는지 확인합니다. 터치스크린이 보편화된 시대에 자란 사람들에게는 탐색, 즉 세부 사항을 찾기 위해 안으로 들어가거나 맥락을 파악하기 위해 밖으로 확장하는 것이 자연스러운 행동 양식입니다.

    디자이너 아자 라스킨이 고안한 무한 스크롤은 “다음 페이지”나 “새로 고침” 버튼을 클릭하는 번거로움을 없앴습니다. 이는 동적 콘텐츠 로딩과 미묘한 흐름 신호를 활용하여 정보가 끊임없이 이어지는 듯한 느낌을 주는 초기 웹 실험에서 영감을 얻었습니다. 페이스북과 트위터에서 처음 대중화된 무한 스크롤은 경계 없는 정보의 세계, 즉 끊임없이 업데이트되고 점점 더 개인화되는 스트림인 피드라는 현대적 개념을 탄생시켰습니다. 마치 현대판 광장처럼, 우리는 피드를 통해 사촌의 졸업 소식부터 세계 정세까지 모든 것을 접하게 됩니다.

    특히 젊은 세대에게 있어, 이 끝없는 디자인은 뉴스부터 인기 있는 뷰티 트렌드, 변화하는 사회적 규범에 이르기까지 모든 정보를 정신없이 빠르게 업데이트하는 문화를 만들어냈습니다. 무한 스크롤과 알고리즘 기반 큐레이션에 대한 의존성은 언어학자 아담 알렉식의 “맥락 붕괴”라는 현상을 초래합니다.

    특히 “추천” 페이지는 커뮤니티 간의 정보 교류를 바이러스처럼 빠르게 촉진하며, 정체성을 재구성하고 새로운 유대감을 형성합니다.

    ‘좋아요’ 버튼이라는 개념은 페이스북이 2009년에 선보이기 훨씬 전부터 실리콘 밸리에서 끊임없이 논의되어 왔습니다. 특히 디자이너 밥 굿슨은 2003년 옐프(Yelp)를 위해 ‘엄지척’과 ‘엄지내림’ 버튼을 구상했는데, 이는 사용자 리뷰에 대한 참여도를 높이면 더 많은 사람들이 리뷰를 남기게 될 것이라는 직감에서 비롯되었습니다. 그의 직감은 적중했습니다. 사용자들이 리뷰를 ‘유용함’, ‘재밌음’, ‘멋짐’ 등으로 쉽게 평가할 수 있도록 함으로써 옐프는 리뷰 수를 폭발적으로 늘렸고, 이는 페이스북의 ‘Props’라는 비밀 프로젝트에 영감을 주었습니다.

    오늘날 ‘좋아요’ 버튼은 참여 중심 경제의 핵심을 이루며 하루에 약 1,600억 번의 클릭이 발생하는 것으로 추산됩니다. 단순한 엄지척 모양은 레딧(Reddit)의 추천 화살표, 인스타그램(Instagram)의 하트 두 번 탭, 슬랙(Slack)의 방대한 ‘reactji’ 팔레트에 이르기까지 다양한 시각적 반응 표현으로 진화했습니다. 온라인 어디를 가든 우리는 즉각적이고 보편적으로 이해되는 긍정적 또는 경우에 따라서는 부정적 표현을 접할 수 있으며, 이는 우리가 소비하는 콘텐츠를 선별하는 암묵적인 방식이 됩니다. ‘좋아요’의 변화는 크리에이터가 무엇을 홍보할지, 플랫폼이 콘텐츠를 배포하는 방식, 그리고 가장 중요하게는 사용자가 콘텐츠의 관련성을 판단하는 방식을 결정합니다.

    소프트웨어 개발자 로렌 브리히터는 2009년 트위터 클라이언트인 트위티(Tweetie)를 위해 ‘당겨서 새로고침’ 기능을 개발했습니다. 새총을 당기는 동작을 연상시키는 이 기능은 콘텐츠 탐색에 재미있고 역동적인 느낌을 더했습니다. 또한, 인간의 뇌는 보상을 기대할 때, 특히 보상이 불확실할 때 더 많은 도파민을 분비하도록 되어 있는데, 이러한 보상 회로를 활용한 것입니다.

    현재 X 플랫폼에서 ‘당겨서 새로고침’ 기능은 무한 스크롤과 함께 작동하여 새로운 업데이트를 로드하는 동안 무한 스크롤은 알고리즘에 따라 정렬된 이전 콘텐츠를 보여줍니다. 하지만 이 기능은 이제 모바일 앱 생태계 전반에 걸쳐 표준 동작으로 자리 잡았으며, 사용자는 무의식적으로 화면을 당겨 새로고침할 수 있게 되었습니다. 우리는 화면을 아래로 당기면 새로운 좋아요, 댓글, 연결 정보가 표시된다는 것을 알고 있습니다. 소셜 미디어뿐 아니라 속보, 날씨, 주가, 콘서트 티켓 예매 등 모든 최신 정보를 얻는 데 이 동작이 사용되고 있으며, 실시간 정보에 대한 우리의 욕구와 불가분의 관계에 있습니다.

    엔지니어이자 발명가인 더글러스 엥겔바트가 1958년 ‘모든 데모의 어머니’라 불리는 데모를 통해 협업 실시간 편집을 개척했지만, 구글은 2009년 구글 문서에서 동시 편집 기능을 도입하며 이를 대중화했습니다. 7년 후, 브라우저 기술, 특히 WebGL의 발전으로 Figma는 전문가 수준의 제품 디자인 도구를 온라인으로 제공하여 인터페이스 제작에 있어 다중 사용자 협업을 가능하게 했습니다. 한때 혼자서 하던 문서, 스프레드시트, 프레젠테이션 또는 디자인 제작이 이제는 공동 작업으로 바뀌었습니다. 정적인 결과물이 생동감을 얻고, 소유권이 한 사람에서 여러 사람에게로 넘어갔습니다.

    이는 멀티플레이어 비디오 게임의 공유 세계 논리를 반영합니다.

    고품질 화상 회의 도구와 결합된 다중 사용자 협업은 언제 어디서든 공동 작업을 가능하게 했고, 코로나19 팬데믹의 제약이 사라진 후에도 오랫동안 지속된 하이브리드 근무 환경을 조성했습니다. 생산성 향상 외에도 이러한 도구들은 독서 모임, 비영리 행사, 단체 여행 등 공동체 형성을 더욱 쉽고 편리하게 만들어 주었으며, 창작자들이 자신의 열정을 추구할 수 있도록 지원해 주었습니다.

    수십 년에 걸친 음성 인식 소프트웨어 개발 여정은 1997년 드래곤 시스템즈(Dragon Systems)가 연속 음성 인식 기능을 갖춘 최초의 소비자 제품인 드래곤 내추럴리스피킹(Dragon NaturallySpeaking)을 출시하면서 중요한 이정표를 세웠습니다. 하지만 대부분의 사람들에게 컴퓨터가 말하는 경험을 처음으로 선사한 것은 2011년 애플의 시리(Siri)였습니다. 이후 아마존의 알렉사(Alexa), 마이크로소프트의 코타나(Cortana), 삼성의 빅스비(Bixby)를 비롯해 끊임없이 늘어나는 인공지능 기반 음성 비서들이 그 대열에 합류했습니다.

    세탁기, 냉장고 같은 가전제품부터 스마트 TV, 보안 기기 같은 전자제품, 그리고 차량용 시스템에 이르기까지 음성 상호작용은 우리의 가장 사적인 공간 곳곳에 스며들어 있습니다. 이러한 환경에서 자란 사람들에게는 기술이 일상적인 작업에 녹아들어 생각의 속도로 움직이고 인간의 언어로 반응하는 것이 당연한 일입니다. 특히 우리가 자라면서 시리나 알렉사를 방 안이나 주머니 속의 주변 지능처럼 여겨왔다면, 명령이란 사실상 담론이며 기술은 우리의 일상적인 작업을 신속하게 처리해 주는 도구라는 것을 이해할 것입니다.

    틴더 공동 창업자 조너선 바딘이 마음에 드는 상대를 오른쪽으로 스와이프하고, 마음에 들지 않으면 왼쪽으로 스와이프하는 방식을 고안했을 때, 그는 이전 온라인 데이팅 시대를 규정했던 성격 테스트와 매칭 알고리즘을 뒤흔드는 혁신적인 동작을 만들어냈습니다. 마치 카드 덱을 정렬하는 것처럼, 이 방식은 상호작용에 게임 요소를 더하고 직관적인 방식으로 즉각적인 반응을 유도했으며, 매칭이 성사되었을 때는 큰 만족감을 선사했습니다.

    오른쪽과 왼쪽으로 스와이프하는 방식은 온라인 데이팅을 넘어 다양한 앱에서 사용되고 있습니다. 이제 사용자들은 옷을 사고, 친구를 사귀고, 외국어를 배우고, 주식을 거래하고, 메시지를 확인하고, 심지어 어떤 사진을 삭제할지 결정하는 데에도 스와이프를 활용합니다. 이 방식이 너무나 보편화되어 Z세대는 “좋아요”와 “싫어요”를 나타내는 은어처럼 “오른쪽으로 스와이프”와 “왼쪽으로 스와이프”를 사용하는데, 이는 빠른 의사 결정을 유도하고 수많은 요소를 이분법적인 질문으로 단순화하는 이 동작의 강력한 영향력을 보여줍니다.

    넷플릭스는 프로그램의 다음 에피소드 자동 재생 기능을 도입함으로써 사용자의 역할을 능동적인 참여자에서 수동적인 시청자로, 즉 선택에 의한 참여에서 선택 해제로 전환시켰습니다. 이후 유튜브는 추천 영상 자동 재생 기능을 도입했고, 이러한 추세는 틱톡으로 이어져 이제는 사용자가 자동 ​​재생 기능을 켜지 않아도 되고, 앱을 종료하지 않는 한 끌 수도 없습니다. 알고리즘은 사용자가 반드시 원하는 콘텐츠가 아니더라도 콘텐츠를 제공하지만, 사용자가 이에 대해 이의를 제기하지 않으면 알고리즘은 메타데이터를 기반으로 사용자의 페르소나를 구축하고, 이를 통해 알고리즘이 추측하는 바를 강화합니다.

    이러한 현상은 참여와 비참여의 경계를 모호하게 만들고, 비행동 속에 암묵적인 행동을 포함하게 합니다. 이러한 현상은 지메일의 스마트 작성 기능부터 구독이나 생활용품 구매의 자동 갱신, 양식 자동 완성 기능에 이르기까지 문화와 상업의 다른 영역으로 확산되었습니다. 우리는 인터페이스가 사용자의 성향과 취향을 예측할 뿐만 아니라, 기술에 경로 수정을 요청할 때 이를 기억하기를 기대합니다.

    컴퓨터 과학자 우드로 블레드소는 1960년대 중반 최초의 자동 얼굴 인식 시스템을 개발하여 디지털 생체 인식 연구에 박차를 가했고, 이는 1990년대에 이르러 법 집행 분야에서 활용되기 시작했습니다. 하지만 일반 소비자들이 신체를 비밀번호처럼 사용할 수 있게 된 것은 2013년 애플의 터치 ID와 2017년 페이스 ID였습니다. 생체 인식은 수동 로그인을 매끄럽고 즉각적인 인증으로 대체함으로써 불편함을 최소화하고 우리의 신체를 우리가 사용하는 인터페이스와 불가분하게 연결했습니다.

    우리는 라떼를 사기 위해 얼굴을 스캔하거나 공항 보안 검색대를 통과하기 위해 홍채를 등록하는 것을 자연스럽게 여깁니다. 지문이나 눈길만으로 중요한 계정을 잠금 해제하고, 이러한 시스템이 견고하고 안전하다는 것을 신뢰합니다. 생체 인증은 애플 워치, 오우라 링, 스마트 안경과 같은 웨어러블 기기의 등장을 예고했습니다. 이러한 기기들은 심박수, 혈중 산소 농도, 걸음 수, 수면 패턴 등 모든 것을 추적합니다. 심지어 배란일이나 심장마비 위험까지 알려줍니다. 민감한 정보에 접근, 관리 및 해석하기 위한 생체 인식 기술의 발전은 소프트웨어에 대한 전례 없는 수준의 신뢰를 구축했습니다.

    2017년, 구글 브레인의 과학자 8명은 “Attention Is All You Need”라는 연구 논문을 발표했습니다. 이 논문은 트랜스포머(Transformer)라는 딥러닝 아키텍처를 소개하며 오늘날의 자연어 처리 로봇(LLM)의 토대를 마련했습니다. 트랜스포머 덕분에 AI 모델은 순서에 상관없이 텍스트를 읽고, 무엇이 중요한지 판단하며, 위치가 아닌 관계를 기반으로 의미를 도출할 수 있게 되었습니다. 이러한 혁신을 바탕으로 오픈AI는 2022년 ChatGPT를 출시했고, 현재는 구글 딥마인드의 제미니(Gemini), 앤트로픽의 클로드(Claude), 메타의 라마 2(Llama 2) 등 다양한 LLM이 등장했습니다. 자연어 프롬프트는 사용자가 일상적인 대화를 통해 기계와 상호작용할 수 있도록 함으로써, 기존 지식이나 기술 수준에 관계없이 누구나 무엇이든 생성할 수 있도록 만들었습니다.

    이는 소프트웨어를 단순한 도구가 아닌 동반자로서 활용하는 새로운 방식을 제시했습니다. 모든 연령대의 사람들이 연애 상담부터 재정 관리, 집수리 ​​계획, 연구까지 모든 분야에서 자연어 처리 로봇을 이용하고 있습니다. 컴퓨터가 의도와 지시를 모두 이해하는 세상에서는 더 많은 사람들이 더 적은 자원으로 더 많은 것을 만들어낼 수 있습니다. 지역 농가를 돕는 앱이든 웹 시 프로젝트든 말이죠. 자연어 프롬프트는 소프트웨어를 유기적으로 만들어주고 기술에 대한 접근성을 전례 없는 수준으로 높여주지만, 여전히 채팅 인터페이스에 국한되어 있습니다. 우리가 기계와 다른 방식으로 소통하는 미래에는 인간의 비전을 실질적인 영향력으로 전환하는 새로운 길이 열릴 것입니다.

    인공지능(AI)은 도구이자 협력자로서 우리를 인간답게 만드는 요소들을 더욱 강화할 수 있습니다. 이미 우리는 명령보다는 대화를 통해 지시하는 방식을 더 많이 사용하고 있습니다. 계층 구조와 매개변수 대신 목표, 동작, 전체적인 맥락으로 소통합니다. 미래는 자동화를 통해 없애는 것이 아니라, 어디에 집중할 것인지에 달려 있습니다. 전 세계의 디자이너들은 이러한 변화 속에서 길을 찾고 있습니다. 우리의 호기심이 이끄는 곳, 의미를 찾는 곳, 기술을 적용하는 방식, 이러한 요소들이 앞으로도 소프트웨어를 만들어갈 원동력이 될 것입니다.

    원문: Software is culture

  • 인터랙티브 애니메이션 ①

    인터랙티브 애니메이션 ①

    본질적으로 어떤 것도 한 지점에서 다른 지점으로 선형 이동하지 않는다. 실제로, 물건이 이동할 때 가속하거나 감속하는 경향이 있다. 우리의 뇌는 이러한 종류의 모션을 예상하므로 애니메이션을 만들 때 이러한 모션을 활용해야 한다. 자연스러운 모션은 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해 준다. – Paul Lewis(Paul is a Design and Perf Advocate)

    • easing은 애니메이션을 자연스럽게 만든다.
    • UI 요소에 대해 ease-out 애니메이션을 선택한다.
    • 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피한는 것이 좋다. 최종 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다.

    전통적인 애니메이션에서 느린 시작 후 가속하는 모션을 ‘slow in’이라고 하고 빠른 시작 후 감속하는 모션을 ‘slow out’이라고 한다. 웹에서는 각 모션에 대해 ‘ease in’ 및 ‘ease out’이라는 용어를 주로 사용한다. 두 모션이 조합된 경우는 ‘ease in out’이라고 한다. easing은 실제로 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만드는 프로세스이다.

    1. 선형(linear) 애니메이션

    LINEAR_EASE.gif

    easing을 사용하지 않은 애니메이션을 선형이라고 한다.
    시간 경과에 따라, 값이 균일하게 증가하며, 선형 모션을 사용할 경우, 로봇처럼 부자연스러운 느낌을 주므로 사용자가 불편함을 느낄 수 있다. 일반적으로, 선형 모션을 피하는 것이 좋다.

    2. Ease-in 애니메이션

    EASE_IN_CURVE.gif

    Ease-in 애니메이션은 ease-out 애니메이션과 반대로 느리게 시작했다가 빠르게 끝난다.
    이러한 종류의 애니메이션은 무거운 돌이 떨어지는 것처럼 느리게 시작하고 낮은 쿵 소리와 함께 빠르게 지면을 때린다.
    하지만 상호작용 관점에서 ease-in은 갑작스럽게 끝나기 때문에 약간 부자연스러운 느낌이 들 수 있다. 실제 세상에서 움직임은 단순히 갑자기 멈추는 것이 아니라 감속하는 경향이 있기 때문이다. 또한 ease-in은 시작 시 굼뜨게 움직이는 듯한 잘못된 효과로 인해 사이트나 앱에서 반응 인지에 부정적 영향을 미칠 수 있다.

    3. Ease-out 애니메이션

    EASE_OUT_CURVE.gif

    Easing out은 선형보다 더 빠르게 애니메이션을 시작하며 마지막에 감속한다.
    Easing out은 빠른 시작으로 애니메이션에 반응 효과를 주면서도 마지막에 자연스러운 감속 효과를 나타내기 때문에, 일반적으로 사용자 인터페이스 작업에 가장 적합하다.

    4. Ease-in-out 애니메이션

    EASE_IN_OUT_CURVE.gif

    Easing in 및 easing out은 차량의 가속 및 감속과 유사하며, 적절히 조합하여 사용하면 easing out만 사용하는 것보다 더욱 드라마틱한 효과를 제공할 수 있다.

    ease-in은 애니메이션을 더디게 시작하기 때문에 애니메이션 기간을 지나치게 오래 설정하지 않는 것이 효과적이다. 일반적으로 300-500ms 사이의 임의 값이 적합하지만, 정확한 값은 프로젝트의 느낌에 따라 상당히 달라진다. 그러나 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자에게 만족감을 줄 수 있다.

    5. Ease In Back 애니메이션

    EASE_IN_BACK.gif

    Ease In Back 은 애니메이션이 초기 키프레임 값을 지난 다음 끝에 도달함에 따라 가속되는 경우이다. 이것은 애니메이션에 바운스를 만들어 관객을 준비시키고 주요 액션을 강화하는 예측 액션 역할을 한다. 천천히 Ease In과 매우 유사 하게 Ease In Back는 개체를 보기에서 부드럽게 전환하는 데 적합하다.

    6. Ease Out Back 애니메이션

    EASE_OUT_BACK.gif

    Ease In Back 의 반대이다 . 애니메이션은 빠르게 시작한 다음 느려지고 종료 키프레임의 값을 지나간다. 이렇게 하면 기본 동작에 대한 부드러운 종료 전환을 만드는 정착 역할을 하는 애니메이션에 바운스가 생성된다. Ease Out 과 유사하게 Ease Out Back 은 개체를 보기로 이동하는 데 적합하다.

    7. Ease In And Out Back 애니메이션

    EASE_IN_OUT_BACK.gif

    애니메이션이 초기 키프레임 값을 초과할 때 천천히 시작한 다음, 속도가 느려지고 끝 키프레임 값을 초과하기 전에 빠르게 가속된다. 이것은 최종 상태 이전에 리바운드 모션과 함께 시작, 빠른 모션에서 예상되는 바운스를 만든다.

    슬라이드 자료

  • 반응형 웹 디자인의 9가지 기본 원칙

    반응형 웹 디자인의 9가지 기본 원칙

    반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없습니다. 점점 더 많은 방문자가 웹 사이트를 열 수 있기 때문에 데스크톱 및 모바일 용 픽셀 단위로만 설계하는 것도 과거입니다. 따라서 여기에 반응형 웹 디자인의 기본 원리를 설명해 보겠습니다. 간단하게 유지하기 위해 레이아웃에 중점을 둘 것입니다.

    반응형(Responsive) vs 적응형(Adaptive) 웹 디자인

    그것은 같아 보일지 모르지만 그렇지 않습니다. 두 가지 방법 모두 서로 보완 적이므로 올바른 방법이나 잘못된 방법은 없습니다. 내용을 결정하게 하십시오.

    흐름(The Flow)

    화면 크기가 작아짐에 따라 콘텐츠가 더 많은 수직 공간을 차지하기 시작하고 아래의 모든 내용이 푸시 다운됩니다. 이를 흐름이라고 합니다. 픽셀과 포인트로 디자인하는데 익숙하다면 이해하기 까다로울 수 있지만 익숙해지면 완전히 이해할 수 있습니다.

    상대 단위(Relative units)

    캔버스는 데스크톱, 모바일 화면 또는 그 사이의 모든 것일 수 있습니다. 픽셀 밀도도 다양 할 수 있으므로 유연하고 모든 곳에서 작동하는 장치가 필요합니다. 그것은 퍼센트와 같은 상대적 단위가 유용 할 때입니다. 그래서 무언가를 50% 넓이로 만들면 항상 화면의 절반 (또는 viewport 창은 열려있는 브라우저 창의 크기)이됩니다.

    브레이크포인트(Breakpoints)

    브레이크포인트를 사용하면 레이아웃을 미리 정의 된 지점에서 변경할 수 있습니다. 즉, 데스크톱에서는 3 개의 열이 있지만 휴대 기기에서는 1 개의 열만 있습니다. 대부분의 CSS 속성은 하나의 중단 점에서 다른 중단 점으로 변경할 수 있습니다. 일반적으로 콘텐츠를 두는 위치는 콘텐츠에 따라 다릅니다. 문장이 중단되면 중단 점을 추가해야 할 수도 있습니다. 그러나 주의해서 사용하십시오. 무엇이 영향을 미치는지를 이해하는 것이 어려울 때 빠르게 지저분해질 수 있습니다.

    최대 값(Max values)과 최소 값(Min values)

    때로는 콘텐츠가 휴대 기기와 같이 화면의 전체 너비를 차지하지만 콘텐츠가 TV 화면의 전체 너비까지 펼쳐지는 것이 좋지 않은 경우가 종종 있습니다. 이것이 Min / Max 값이 도움이되는 이유입니다. 예를 들어 너비가 100%이고 최대 너비가 1000px 인 경우 내용이 화면을 채우지 만 1000px를 넘지는 않습니다.

    중첩 된 객체(Nested objects)

    상대 위치를 기억 하십시오. 서로에 따라 많은 요소를 가지면 제어하기가 어려우므로 컨테이너의 요소를 래핑하면 더 이해하기 쉽고 깨끗하며 깔끔하게 유지할 수 있습니다. 여기서 픽셀과 같은 정적 단위가 도움이 될 수 있습니다. 로고와 버튼처럼 크기를 조정하지 않으려는 콘텐츠에 유용합니다.

    모바일(Mobile) 또는 데스크톱(Desktop) 우선

    기술적으로 작은 화면에서 큰 화면 (모바일 우선) 또는 그 반대로 (데스크톱 우선) 프로젝트를 시작하면 큰 차이가 없습니다. 그러나 모바일을 처음 사용하는 경우 추가 제한 사항이 추가되고 의사 결정을 내리는 데 도움이됩니다. 종종 사람들은 한 번에 양 끝에서 시작하기 때문에 실제로 무엇이 더 잘 작동하는지 확인해야 합니다.

    웹 폰트 vs 시스템 폰트

    귀하의 웹 사이트에 멋지게 보이는 Futura 또는 Didot을 원하십니까? 웹 폰트 사용! 그들이 멋지게 보일지라도, 각각이 다운로드 될 것이고 더 많이 가질수록 페이지를 로드하는데 더 오래 걸릴 것임을 기억하십시오. 반면에 시스템 글꼴은 매우 빠르며 사용자가 로컬 글꼴을 가지고 있지 않은 경우를 제외하고는 기본 글꼴로 돌아갑니다.

    Bitmap images vs Vectors

    아이콘에 많은 세부 정보가 있고 멋진 효과가 적용 되었습니까? 그렇다면 비트 맵을 사용하십시오. 그렇지 않은 경우 벡터 이미지 사용을 고려하십시오. 비트 맵의 경우 jpg, png 또는 gif를 사용하고 벡터의 경우 SVG 또는 아이콘 글꼴을 사용하는 것이 가장 좋습니다. 각각에는 몇 가지 이점과 단점이 있습니다. 그러나 크기를 염두에 두십시오. 사진을 최적화하지 않으면 온라인 상태로 만들 수 없습니다. 반면에 벡터는 종종 작지만 일부 오래된 브라우저는 벡터를 지원하지 않습니다. 또한 곡선이 많으면 비트맵보다 무거울 수 있으므로 현명하게 선택하십시오.

    출처 : 9 basic principles of responsive web design