Category: Web Design

  • 소프트웨어는 곧 문화

    소프트웨어는 곧 문화

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

    이제 또 다른 변화가 다가오고 있습니다. 소프트웨어가 지능화되고 있는 것입니다. 고정된 상호작용 방식 대신, 학습하고, 적응하고, 반응하는 시스템을 구축하게 될 것입니다. 인터페이스는 실시간으로 진화하며, 우리의 필요와 행동 변화에 따라 형태를 바꿀 것입니다. 한때 정적이었던 것이 유동적이고, 적응력이 뛰어나며, 마치 살아있는 것처럼 변모할 것입니다. 우리가 어디로 향하고 있는지 이해하려면 과거를 되돌아보는 것이 도움이 됩니다. 지난 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

  • Div에서 이미지 가운데 맞추기

    Div에서 이미지 가운데 맞추기

    웹 페이지의 프론트 엔드에서 작업할 때 이미지를 div(컨테이너) 내 중앙에 배치해야 하는 경우가 있습니다.

    이것은 때때로 까다로울 수 있습니다. 그리고 특정 조건에 따라 특정 방법이 어느 시점에서 작동하지 않을 수 있으므로 대안을 찾아야 합니다.

    div이 기사에서는 CSS 를 사용 하여 이미지를 중앙에 배치하는 방법을 배웁니다 .

    DIV에서 CSS를 사용하여 중앙에 배치하는 방법

    div가로 및 세로의 두 가지 방법으로 이미지를 중앙에 배치합니다. 이 두 가지 방법을 함께 사용하면 완전히 중앙에 배치된 이미지를 갖게 됩니다.

    기본적으로 웹 콘텐츠는 항상 화면의 왼쪽 상단 모서리에서 시작하여 ltr(왼쪽에서 오른쪽으로) 이동합니다. 아랍어와 같은 특정 언어는 rtl(오른쪽에서 왼쪽으로) 제외됩니다.

    div수평 으로 이미지를 중앙에 맞추는 방법부터 시작하겠습니다 . 그런 다음 세로로 가운데 정렬하는 방법을 알아보겠습니다. 마지막으로 두 가지를 함께 수행하는 방법을 살펴보겠습니다.

    텍스트 정렬을 사용하여 Div의 이미지를 가로로 가운데에 맞추는 방법

    div다음 과 같이 이미지를 배치하는 위치 가 있다고 가정합니다 .

    <div class="container">
        <img src="./fcc-logo.png" alt="FCC Logo" />
    </div>

    이미지가 보이도록 기본 CSS 스타일을 적용합니다.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
    }
    .container img {
        width: 100px;
    }

    이 text-align방법은 일반적으로 텍스트를 가운데에 맞추는 데 사용하므로 모든 경우에 작동하지는 않습니다. 그러나 와 같은 블록 수준 컨테이너 내에 이미지가 있는 div경우 이 방법이 작동합니다.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        text-align: center;
    }
    
    .container img {
        width: 100px;
    }

    이것은 이미지 자체가 아닌 컨테이너에 text-align값과 함께 속성 을 추가하여 작동 합니다.center

    Margin-auto를 사용하여 Div의 이미지를 수평으로 가운데에 맞추는 방법

    div(컨테이너) 내에서 이미지를 수평으로 중앙에 배치하는 데 사용할 수 있는 또 다른 방법 margin은 값이 인 속성입니다 auto.

    그러면 요소가 지정된 width 을 차지하고 나머지 공간은 왼쪽과 오른쪽 여백 사이에 균등하게 분할됩니다.

    일반적으로 이 방법을 컨테이너가 아닌 이미지 자체에 적용합니다. 그러나 불행히도 이 속성만으로는 작동하지 않습니다. width또한 먼저 촬영할 이미지 를 지정해야 합니다 . 이렇게 하면 여백이 컨테이너의 나머지 너비를 알 수 있으므로 균등하게 분할할 수 있습니다.

    둘째, img인라인 요소이며 margin-auto속성 집합은 인라인 수준 요소에 영향을 주지 않습니다. display즉, 속성이 로 설정된 블록 수준 요소로 먼저 변환해야 합니다 block.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
    }
    
    .container img {
        width: 100px;
        margin: auto;
        display: block;
    }

    Position 및 Transform 속성을 사용하여 Div에서 이미지를 수평으로 가운데에 맞추는 방법

    이미지를 수평으로 배치하는 데 사용할 수 있는 또 다른 방법은 position속성 옆에 있는 transform속성입니다.

    이 방법은 매우 까다로울 수 있지만 작동합니다. 먼저 컨테이너 position를 로 설정 relative한 다음 이미지를 로 설정해야 합니다 absolute.

    left이렇게 하면 이제 이미지의 , topbottom또는 right속성을 사용하여 원하는 위치로 이미지를 이동할 수 있습니다 .

    이 경우 이미지를 가로 중앙으로만 이동하려고 합니다. 즉, 이미지를 left50% 또는 right-50%로 이동합니다.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        position: relative;
    }
    
    .container img {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
    }

    그러나 이미지를 확인할 때 이미지가 여전히 중앙에 완벽하게 배치되지 않았음을 알 수 있습니다. 센터 포지션인 50%대부터 시작했기 때문이다.

    이 경우 transform-translateX속성을 사용하여 수평으로 완벽한 중심을 얻도록 조정해야 합니다.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        position: relative;
    }
    
    .container img {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    Display-Flex를 사용하여 Div의 이미지를 수평으로 가운데에 맞추는 방법

    CSS flexbox를 사용하면 부동 또는 위치 지정을 사용하지 않고도 유연하고 반응이 빠른 레이아웃 구조를 더 쉽게 디자인할 수 있습니다. 또한 이것을 사용하여 flex를 값으로 하는 display 속성을 사용하여 컨테이너의 수평 중앙에 이미지를 배치할 수 있습니다.

    그러나 이것만으로는 작동하지 않습니다. 또한 이미지를 원하는 위치를 정의해야 합니다. 이것은 center, left또는 아마도 right:

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        display: flex;
        justify-content: center;
    }
    
    .container img {
        width: 100px;
        height: 100px;
    }

    참고: 이 display: flex속성은 이전 버전의 브라우저에서 지원되지 않습니다. 여기에서 더 많은 것을 읽을 수 있습니다 . 또한 이미지가 축소되지 않도록 이미지의 너비와 높이가 정의되어 있음을 알 수 있습니다.

    div이제 이미지를 세로 로 가운데에 맞추는 방법을 알아보겠습니다 . 나중에 우리는 이미지를 div수평 및 수직으로 중앙에 배치하여 완벽한 중앙으로 만드는 방법을 볼 것입니다.

    Display-Flex를 사용하여 수직으로 Div에서 이미지를 가운데에 맞추는 방법

    display-flex 방법으로 이미지를 수평으로 중앙에 정렬할 수 있었던 것처럼 수직으로도 동일한 작업을 수행할 수 있습니다.

    그러나 이번에는 justify-content속성을 사용할 필요가 없습니다. 오히려 다음 align-items속성을 사용합니다.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        display: flex;
        align-items: center;
    }
    
    .container img {
        width: 100px;
        height: 100px;
    }

    height이 방법이 작동하려면 컨테이너 에 높이를 계산하고 중심 위치를 아는 데 사용할 지정된 컨테이너가 있어야 합니다 .

    Position 및 Transform 속성을 사용하여 수직으로 Div에서 이미지를 가운데에 맞추는 방법

    position이전에 및 속성 을 사용 transform하여 이미지를 수평으로 중앙에 배치한 것과 유사하게 수직으로도 동일하게 수행할 수 있습니다.

    하지만 이번에는 left또는 를 사용하지 않습니다 right,. 대신 다음 대신 또는 top함께 bottom사용 합니다 .translateYtranslateX

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        position: relative;
    }
    
    .container img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    div가능한 모든 방법을 사용하여 가로 및 세로 로 이미지를 가운데에 맞추는 방법을 배웠습니다 . 이제 가로와 세로 모두 가운데 정렬하는 방법을 알아보겠습니다.

    Display-Flex를 사용하여 Div의 이미지를 가로 및 세로로 가운데에 맞추는 방법

    display-flex속성은 이미지를 세로 및 가로로 가운데에 맞추는 방법의 조합입니다 .

    justify-contentflex 메서드의 경우 다음으로 설정된 및 align-items속성을 모두 사용하게 됩니다 center.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .container img {
        width: 100px;
        height: 100px;
    }

    Position 및 Transform 속성을 사용하여 Div의 이미지를 가로 및 세로로 가운데에 맞추는 방법

    이것은 또한 매우 유사합니다. 당신이 해야 할 일은 수직 및 수평 중앙에 둘 수 있는 두 가지 방법을 결합하기만 하면 되기 때문입니다.

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        position: relative;
    }
    .container img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    다음 을 사용하여 translateXand 를 결합할 수도 있습니다 .translateYtranslate(x,y)

    .container {
        width: 200px;
        height: 200px;
        background-color: #0a0a23;
        position: relative;
    }
    .container img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    마무리

    이 기사에서는 div의 이미지를 세로, 가로 또는 둘 다 가운데에 맞추는 방법을 배웠습니다.

    positionFlexbox 방법 은 웹 페이지를 왜곡하고 매우 까다롭게 작동하기 때문에 이미지를 중앙으로 이동할 때 종종 Flexbox 방법을 사용합니다 .

    여기에서 CSS 위치 방법 에 대해 자세히 알아볼 수 있고 여기 에서 flexbox 방법에 대해 자세히 알아볼 수 있습니다.

    즐거운 코딩하세요!

  • 키보드 심벌 이름 알아보기

    키보드 심벌 이름 알아보기

    컴퓨터 키보드에는 코딩에 사용되는 문자와 숫자보다 더 많은 기호가 있다. 아래의 표에서는 각 특수 키보드 기호의 이름과 위치를 보여준다.

    키/심벌이름
    `grave, grave accent, backtick, back quote
    ~tilde
    !exclamation mark, exclamation point, bang
    @at, at sign, at symbol
    #pound, hash, number
    $dollar(s)
    %percent, percent sign, parts per 100
    ^carat, hat, circumflex, exponent symbol
    &and, ampersand
    *asterisk
    (open parenthesis, left parenthesis
    )close parenthesis, right parenthesis
    ( )parentheses, round brackets
    hyphen, minus, minus sign, dash
    _underscore
    =equals, equal sign
    +addition, plus sign
    [ ]brackets(각 괄호), square brackets
    [open bracket
    ]close bracket
    { }braces(중괄호), curly brackets
    {open brace
    }close brace
    \backslash, backward slash
    |vertical pipe, pipe
    ;semicolon(세미콜론)
    :colon(콜론)
    apostrophe, prime, single quote
    quotation mark, double quotes
    ,comma
    .period, decimal, dot
    /slash, forward slash
    <>angle brackets
    <less than(미만)
    >greater than(~보다 큰)
    ?question mark
    Keyboard Symbols
  • 버튼 디자인 기본 원칙

    버튼 디자인 기본 원칙

    아래 내용은 버튼의 기본 원칙을 중심으로 주의해야 하는 내용을 중심으로 나열하였다. 디자이너가 버튼의 용도나 레이아웃에 필요한 위치에 효과적으로 적용할 수 있도록 다양한 방법을 알아보자.

    Button : “submit”, “merge”, “create new”, “upload” 등과 같은 작업을 수행할 때 사용된다.
    Link : 페이지 “view all”, “Roger Wright” 프로필 등과 같은 다른 장소로 이동할 때 사용된다.
    Anchor : 페이지 내에서 원하는 위치로 이동하는 방법을 제공한다.(예, 목차)

    버튼의 상태(states)

    버튼에 대한 올바른 상호 작용과 스타일을 만드는 것은 프로세스에서 가장 중요한 부분 중 하나이다. 각 상태에는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스(Affordance)가 있어야 하지만 구성 요소를 크게 변경하거나 많은 시각적 노이즈를 생성해서는 안 된다.

    버튼에 알아볼 수 있는 디자인 사용

    사용자 인터페이스와 상호 작용할 때 사용자는 클릭할 수 있는 것과 클릭할 수 없는 것을 즉시 알아야 한다.

    디자인은 우선순위와 관련되어야 한다.

    버튼의 크기는 우선 순위를 반영해야 한다. 우선 순위가 더 높은 버튼에 더 큰 크기를 할당한다.

    버튼 구조 이해

    기본 구조 요소 : Text label, Border, Background, Icon
    보조 요소 : Border radius, Padding, Gutter, Effects

    색상 심리 적용

    색상은 버튼의 용도와 상대적 중요성을 나타내는 효과적인 도구이다.
    우선 순위가 높은 버튼을 강조 표시하려면 배경과 대조되는 색상을 사용한다.

    사용자가 찾을 것으로 예상되는 위치에 배치

    버튼은 사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 위치에 있어야 한다.
    사용자가 버튼을 찾도록 유도 하지 말아야 한다.

    Tip : 항상 접힌 부분 위에 버튼을 놓는다.

    각 버튼의 기능을 명확하게 표시

    일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다.

    스마트폰용 손가락 친화적인 버튼 만들기

    MIT Touch Lab* 연구에 따르면 손가락 패드의 평균은 10-14mm이고 손가락 끝은 8-10mm이다.
    이것은 10mm x 10mm가 적절한 최소 터치 대상 크기가 되도록 한다.

    버튼을 적절하게 간격두기

    이러한 크기는 사용자로부터 더 빠르고 정확한 반응을 이끌어낸다.

  • 모바일 우선 디자인에 대한 실습 가이드

    모바일 우선 디자인에 대한 실습 가이드

    모바일 우선 접근 방식은 말 그대로 가장 작은 화면에 맞게 디자인하고 작업을 진행하는 것이다. 반응형(Responsive) 또는 적응형 디자인(Adaptive design)을 만드는 가장 좋은 전략 중 하나이다.

    • 모바일 우선 접근 방식은 점진적 향상(progressive enhancement)의 주안점이다. 모바일 디자인은 가장 어려운 일인 만큼 먼저 해야 한다는 것이 이념이다. 모바일 디자인 질문에 대한 답을 얻으면 다른 장치를 위한 디자인이 더 쉬워진다. 요약하자면 가장 작은 디자인에는 필수 기능만 있을 것이므로 즉시 UX의 핵심을 디자인한 것이다.
    • 반대 접근 방식은 단계적 저하(graceful degradation)이다. 이것은 처음부터 모든 복잡성을 통합하고 나중에 더 작은 장치를 위해 제거한다. 단계적 저하의 문제는 처음부터 모든 포괄적 디자인을 구축할 때 핵심 요소와 보조 요소가 병합되어 구별 및 분리가 더 어려워진다는 것이다. 전체 철학은 경험을 “축소”하고 있기 때문에 모바일 디자인을 사후 고려 사항으로 취급할 위험이 있다.

    우리는 다른 사람들과 함께 모바일 우선 접근 방식을 통한 점진적 개선을 강력히 권장한다. 이 게시물에서는 팁과 기술을 설명하고 모바일 우선 워크플로를 사용하여 가상의 웹사이트를 구축하는 실습 강의로 마무리한다.

    모바일 우선(Mobile-First) = 콘텐츠 우선(Content-First)

    귀하의 사이트가 모바일 장치에서 좋다면 모든 장치에서 더 잘 해석된다. 하지만 더 중요한 것은 모바일 우선 접근 방식이 콘텐츠 우선 접근 방식이기도 하다는 것이다. 모바일에는 몇 가지 예를 들자면 가장 많은 제한 사항, 화면 크기 및 대역폭이 있으므로 이러한 매개 변수 내에서 디자인하면 무자비하게 콘텐츠의 우선 순위를 지정해야 한다는 것이다.

    모바일 우선 접근 방식은 유기적으로 더 콘텐츠 중심적이며 따라서 사용자 중심적인 디자인으로 이어진다. 사이트의 핵심은 콘텐츠이다. 바로 이것이 사용자가 존재하는 이유이다.

    그러나 한 가지 주의할 점은 모바일 사용자는 때때로 데스크톱 사용자와 다른 콘텐츠가 필요하다는 것이다. 기기별 콘텐츠는 컨텍스트를 고려하여 측정할 수 있다. 즉, 주어진 상황과 주어진 환경에서 사용자가 더 높이 평가할 사항은 무엇인지? 이를 미리 계획하는 가장 좋은 방법은 사용자 시나리오를 만드는 것이다.

    이동하는

    모바일 우선 접근 방식의 또 다른 이점은 작은 화면 중단점(breakpoints)이 콘텐츠 주위에 더 잘 맞을 수 있다는 것이다. 다시 말하지만, 대안은 더 나쁘다. 이미 통통한 디자인을 작은 프레임워크에 짜넣어야 하는 것이다. 그러나 모바일 우선 접근 방식을 사용하면 콘텐츠 주변에 자연스럽게 중단점(breakpoints)이 생성되므로 어색한 편집이 필요하지 않는다.

    모바일 우선 설계 프로세스

    우리는 Figma 에서 디자이너를 돕는 프로세스를 설명할 것이다.

    평소와 같이 와이어프레임은 레이아웃을 가장 효율적으로 구성하기 위해 권장되는 초기 단계이다. 와이어프레이밍이나 프로토타이핑을 할 때 반응형 중단점(breakpoints) 메뉴를 사용하여 가장 작은 것부터 시작하여 다양한 화면 크기로 이동하는 프로세스를 간소화한다.

    UXPin의 반응형 웹사이트 디자인

    이러한 사전 설정은 적절한 화면 크기를 레이아웃하므로 콘텐츠만 염두에 두고 와이어프레임할 수 있다.

    절차는 다음 단계를 따른다.
    1. 콘텐츠 인벤토리(Content Inventory) — 포함하려는 모든 요소가 포함된 스프레드시트 또는 이에 상응하는 문서이다.

    UXPin을 사용한 모바일 퍼스트 디자인

    출처: Maadmob

    2. 시각적 계층 구조(Visual Hierarchy) – 콘텐츠 인벤토리의 요소에 우선 순위를 지정하고 가장 중요한 요소를 눈에 띄게 표시하는 방법을 결정한다.

    3. 가장 작은 중단점(breakpoints)으로 디자인한 다음 확장 — 모바일 와이어프레임을 먼저 구축한 다음 이를 더 큰 중단점(breakpoints)의 모델로 사용한다. 공백이 너무 많이 생길 때까지 화면을 확장한다.

    4. 터치 대상 확대 — 손가락은 픽셀 단위의 정확한 마우스 커서보다 훨씬 넓기 때문에 탭할 더 큰 요소가 필요하다. 이 글을 쓰는 시점에서 Apple은 터치 대상에 대해 44픽셀 정사각형을 권장한다. 하이퍼링크에 충분한 공간을 제공하고 버튼을 약간 확대하고 모든 대화형 요소 주위에 충분한 공간이 있는지 확인하자.

    5. 호버링에 의존하지 말자 — 거의 당연한 이야기지만 디자이너는 종종 인터랙티브 작업에서 호버 및 마우스오버 효과에 의존한다. 모바일 친화적이라고 생각한다면 하지 않는것이 좋다. 아직 손끝에 대한 호버 컨트롤이 없다.

    6. “APP”을 생각하라 — 모바일 사용자는 경험의 움직임과 약간의 제어에 익숙하다. 캔버스 외부 탐색 , 확장 가능한 위젯, AJAX 호출 또는 사용자가 페이지를 새로 고치지 않고도 상호 작용할 수 있는 화면의 기타 요소에 대해 생각해 보자.

    7. 큰 그래픽 피하기 — 가로 사진과 복잡한 그래픽은 화면 너비가 몇 인치에 불과할 때 잘 표시되지 않는다. 휴대용 화면에서 읽을 수 있는 이미지로 모바일 사용자를 수용한다.

    8. 실제 장치에서 테스트 — 웹사이트가 얼마나 유용한지(또는 그렇지 않은지) 스스로 발견하는 것보다 좋은 것은 없다. Desktop/Notebook 컴퓨터에서 벗어나 실제 휴대폰이나 태블릿에 제품을 로드해보자. 페이지를 탭하고, 사이트 탐색이 쉬운지~? 적시에 로드되는지~? 텍스트와 그래픽이 읽기 쉬운지~?

    이것은 단지 기본 개요이다. 프로세스에 대한 전체 가이드를 보려면 반응형 디자인을 위한 무료 콘텐츠 와이어프레임을 다운로드해서 확인해 보자.

    Mobile-First 설계 튜토리얼

    장치마다 화면 크기와 방향에 따라 다른 레이아웃이 필요하다는 점을 감안할 때 사용자를 위해 여러 배열을 디자인하는 것이 좋습니다. 운 좋게도 Figma에서 바로 반응형 또는 적응형 변형을 만들 수 있다.

    예제를 만들고 스마트폰에서 태블릿 및 데스크톱 보기로 콘텐츠를 확장하는 방법을 설명한다. 계속해서 예제를 만들고 아래를 따라해 보자.

    콘텐츠 우선 순위 설정

    “모바일 우선 접근”은 “데스크톱 우선”과 다르다. 더 작게 디자인할 때 잘라내지 않고 점차적으로 더 큰 레이아웃에 정보를 추가한다. 모바일을 생각한다는 것은 정보를 제거한다는 의미가 아니다. 정보를 1차, 2차, 3차 콘텐츠로 분류하는 것을 의미한다.

    이 예에서 우리는 홈 페이지에 회사 이름 및 제품 링크와 같은 특정 요소가 있어야 한다는 것을 알고 있다. 블로그 게시물도 나쁘지 않을 것이다. 그러나 우리가 말했듯이 모든 것이 스마트폰 보기에 맞지는 않으므로 사이트의 목표인 자전거 판매를 달성할 수 있는 항목에 따라 우선 순위를 설정한다.

    1. 최신형 자전거

    2. 베스트 셀러 바이크

    3. “나에게 딱 맞는 라이드 찾기” CTA

    4. 회사명 및 히어로 이미지

    5. 내비게이션

    6. 검색

    7. 두 번째로 많이 팔린 자전거

    8. 상품권

    9. 추천서

    10. 최신 블로그 게시물

    주문한 목록을 기반으로 우리의 작업이 판매를 얻는 디자인 문제를 해결할 것이라는 확신을 가지고 만들 수 있다.

    스마트폰 보기

    사용자는 얼마나 필요할까~?

    모바일 우선을 생각하면 무엇이 정말 중요한지 생각하게 한다. 이 스마트폰 보기에서 가장 많이 팔린 자전거와 최신 모델은 판매로 직접 연결되므로 상품권, 덜 인기 있는 모델, 최신 뉴스와 같은 다른 항목을 내부 페이지에 남겨둘 수 있다. 마지막 클릭 유도문안은 특히 눈에 잘 띄며 손가락을 한 번만 탭하면 쉽게 칠 수 있다.

    태블릿 보기

    태블릿 크기의 보기용으로 디자인할 때 추가 제품(예: “축전기”)과 같은 2차 정보를 더 잘 추가할 수 있다. 또한 페이지 상단의 탐색을 확장하고 실제로 판매로 이어지지 않고 판매를 장려하는 콘텐츠, 즉 고객 평가를 추가할 수 있다.

    더 많은 옵션을 사용할 수 있기 때문에 스마트폰 UI에 무엇을 포함할지 결정하는 것보다 훨씬 더 어려울 수 있다. 2차 요소와 3차 요소의 차이는 모호한 선이고 모든 것을 포함하고 싶은 유혹이 강하다.

    충동에 저항해보자~ 정렬된 콘텐츠 목록을 사용한다. 스마트폰과 마찬가지로 공간은 여전히 ​​제한적이다.

    데스크탑 보기

    마지막으로 데스크탑 보기는 중요하다고 결정한 만큼 많은 정보를 지원할 수 있다. 여기에서 홈 페이지는 적합 여부에 관계없이 적합하다고 생각하는 모든 정보를 수용할 수 있다. 포함된 몇 가지 추가 콘텐츠를 확인해 보자.

    • 상품권
    • 고객 평가
    • 최신 Lightning Bolt 자전거 탐색 블로그 게시물

    장치에 적합한 레이아웃을 직접 디자인하기

    Figma을 사용하는 경우 이러한 보기에 대해 다른 레이아웃을 만드는 것은 상당히 쉽다.

    1. Figma 프로토타입을 연다.
    2. Figma 편집기의 오른쪽 하단에 있는 “새 적응형 버전 추가”를 탭합니다.UXPin 캔버스 설정
    3. 미리 설정된 크기를 선택하거나 고유한 크기를 입력합니다.
      UXPin의 반응형 웹사이트 디자인
    4. 처음부터 모든 것을 다시 만들 필요는 없다. 디자인 요소를 복사할 크기를 선택한다.
      UXPin 앱 디자인 및 프로토타입

    캔버스 위의 다양한 크기를 탭하여 중단점(breakpoints) 사이를 전환하고 필요에 맞게 각각을 조정한다. 모바일 우선 프로토타이핑을 직접 시도하고 싶다면 Figma에서 시작해 보자.

    원문 : A Hands-On Guide to Mobile-First Responsive Design

  • 빠른 UI 레이아웃을 위한 속독법

    빠른 UI 레이아웃을 위한 속독법

    • 가로(Horizontal), 세로(Vertical), 혼합(Mixed)의 흐름을 구분 짖는다.
    • 그에따른 각 섹션에 화살표로 방향을 정의한다.
    • 방향에 따른 개별 덩어리를 나눠 구분한다.
    • 섹션별 흐름의 우선순위를 결정한다.
    • 최대한 눈의 움직임을 단순하게 처리한다.
    • Visual path 기법을 통한 분석 적용 ( Gutenberg Diagram, Z-pattern and F-pattern)
    • 흐름에 맞게 전략과 콘텐츠를 채워나간다.
    • 각각의 그룹 컨테이너의 흐름에 강조할 그룹을 정의한다.

    데스크톱

    LSR(Layout Speed Reading) for Desktop

    모바일

    LSR(Layout Speed Reading) for Mobile
  • 모바일 디자인이 우선 되어야 하는 이유

    모바일 디자인이 우선 되어야 하는 이유

    연구에 따르면 약 94%의 사람들이 반응형 웹 디자인을 기반으로 웹사이트를 판단한다. 모바일 우선 디자인이 향후 몇 년 동안 최우선 순위가 되어야 하는 이유를 알아보자.

    Mobile First 디자인이란 무엇인가?

    모바일 퍼스트 디자인은 가장 작은 화면을 위한 디자인을 의미한다. 가장 중요한 것은 여러분의 웹사이트가 모바일 장치에서 잘 작동한다면 다른 장치에서도 더 잘 작동할 것이다.

    모바일 우선 디자인은 콘텐츠 우선 디자인을 의미한다. 그것은 당신이 당신의 공간을 현명하게 사용하도록 강요하고 모든 요소에 적합한 장소를 찾을 수 있도록 한다. 모든 것이 전화를 보는것 처럼 맞는 것은 아니므로 사이트의 목표를 달성할 수 있는 항목에 따라 우선 순위를 설정해야 한다. 의미없는 끝없는 텍스트는 잊어 버리기 바란다. 기본적으로 좋은 결과를 원한다면 가장 가치 있는 콘텐츠만 남게 된다.
    따라서 현명하게 생각하고 계획을 세우거나 전문가의 도움을 요청해야 한다.

    Mobile First와 Mobile Responsive 디자인의 차이점은 무엇인가?

    웹 디자인 세계에는 두 가지 이데올로기가 있다. 하나는 점진적 향상/progressive enhancement(mobile-first)이라고 하고 다른 하나는 단계적 저하/graceful degradation(desktop first)이다. 점진적 향상 이데올로기는 웹 사이트가 먼저 더 작은 장치에 맞게 설계되어야 하고 개발자는 더 큰 화면에 맞게 조정해야 한다는 것을 의미한다. 다른 하나는 반대로 말한다. 처음에는 데스크탑용으로 사이트를 디자인한 다음 더 작은 화면에 맞게 조정해야 한다.

    모바일 사용자가 웹 사이트에 점점 더 많은 트래픽을 가져옴에 따라 점진적 향상 이데올로기가 대중화되고 있다. 단계적 저하의 문제는 처음부터 모든 포괄적인 디자인(All-Inclusive Design)을 구축할 때 요소가 병합되어 강조하고 분리하기가 더 어려워진다는 것이다.

    By Stéphanie Walter – Based on Responsive Strategy by Brad Frost

    어떤 전략을 사용해야 하나?

    지난 6년 동안 전 세계 휴대전화 사용자 수는 41억 명에서 493명으로 거의 10억 명으로 늘어났습니다. 얼마 지나지 않아 Google은 Mobile-First Sites가 더 높은 순위를 차지할 것이라고 발표했다.

    스스로에게 질문해보자. 타겟 고객은 무엇을 사용하고 있나? 그들은 PC 애호가인가? 아니면 웹사이트에 있을 때 스마트폰을 사용하는 것을 선호하나? 일부 B2B 회사는 여전히 PC를 사용하는 수많은 클라이언트를 보유하고 있다.
    그것을 보는 방법을 잘 모르겠다면 Google Analytics를 사용하여 시작해보자. 청중을 더 잘 알게 되는 것이다. 그들이 사용하는 기기, 성별, 출신 국가, 사이트에서 보내는 시간 등을 볼 수 있다.

    Mobile First 전략의 이점

    인터넷 트래픽의 57.88% 가 휴대전화를 통해 이루어지며 전문가들은 최대 75% 까지 증가할 것으로 예측한다. 이는 과소 평가되지 않는다.

    첫인상은 바꾸기 어렵고, 고객들은 웹사이트가 좋지 않으면 회사를 판단하는 경향이 있다.

    모바일 우선 접근 방식으로 웹사이트를 조정할 경우 얻을 수 있는 이점은 다음과 같다.

    • 모바일 장치에서 최고의 사용자 경험
    • Google은 모바일 우선 색인을 사용한다.
    • 더 빠른 웹사이트
    • 내장된 전화 기능을 사용하도록 웹사이트 디자인 가능
    • 미래에 대한 투자
    Share of 57.88%
  • HTML 페이지 Scroll Animation 구현

    HTML 페이지 Scroll Animation 구현

    기본적으로 HTML, CSS, Javascript 세 가지 구성으로 웹 페이지 내에서 스크롤시에 애니메이션을 구현할 수 있다. 아래의 예제는 대표적인 것으로 이해하면 된다. 기타 다양한 상황과 원하는 레이아웃에서의 구성으로 인해 구현 방법은 다를 것으로 예상되지만 대표적으로 많이 사용되는 사례들을 아래에 나열하였다. 부족할 경우 구체적인 구글링으로 원하는 것을 찾아 응용하면 될 것으로 생각된다.

    아래 코드에 이해를 돕기 위해 각주 처리를 참고하여 이해하면 좋을 듯싶다.

    /* 첫 번째 섹션 시작 */
    <section>
      <h1>아래로 스크롤하여 개체 요소 표시하기 ↓</h1>
    </section>
    /* 첫 번째 섹션 끝 */
    /* 두 번째 섹션 시작 */
    <section>
      <div class="container reveal">
        <h2>두 번째 섹션</h2>
        <div class="text-container">
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
        </div>
      </div>
    </section>
    /* 두 번째 섹션 끝 */
    /* 세 번째 섹션 시작 */
    <section>
      <div class="container reveal">
        <h2>세 번째 섹션</h2>
        <div class="text-container">
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
        </div>
      </div>
    </section>
    /* 세 번째 섹션 끝 */
    /* 네 번째 섹션 시작 */
    <section>
      <div class="container reveal">
        <h2>네 번째 섹션</h2>
        <div class="text-container">
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
          <div class="text-box">
            <h3>Section Text</h3>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
              eius molestiae perferendis eos provident vitae iste.
            </p>
          </div>
        </div>
      </div>
    </section>
    /* 네 번째 섹션 끝 */
    @import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Asap", sans-serif;
    }
    body{
      background: #42455a;
    }
    section{
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    section:nth-child(1){
      color: #e0ffff;
      }
    section:nth-child(2){
      color: #42455a;
      background: #e0ffff;
    } 
    section:nth-child(3){
      color: #e0ffff;
    }
    section:nth-child(4){
      color: #42455a;
      background: #e0ffff;
    }
    section .container{
      margin: 100px;
    }
    section h1{
      font-size: 3rem;
      margin: 20px;
    }
    section h2{
      font-size: 40px;
      text-align: center;
      text-transform: uppercase;
    }
    section .text-container{
       display: flex;
    }
    section .text-container .text-box{
      margin: 20px;
      padding: 20px;
      background: #00c2cb;
    }
    section .text-container .text-box h3{
      font-size: 30px;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    
    @media (max-width: 900px){
      section h1{
        font-size: 2rem;
        text-align: center;
      }
      section .text-container{
        flex-direction: column;
      }
    }
    
    .reveal{
      position: relative;
      transform: translateY(150px);
      opacity: 0;
      transition: 1s all ease;
    }
    
    .reveal.active{
      transform: translateY(0);
      opacity: 1;
    }
    function reveal() {
      var reveals = document.querySelectorAll(".reveal");
      for (var i = 0; i < reveals.length; i++) {
        var windowHeight = window.innerHeight;
        var elementTop = reveals[i].getBoundingClientRect().top;
        var elementVisible = 150;
        if (elementTop < windowHeight - elementVisible) {
          reveals[i].classList.add("active");
        } else {
          reveals[i].classList.remove("active");
        }
      }
    }
    window.addEventListener("scroll", reveal);

    고정 Header / Footer 스크롤시 애니메이션 처리

    스크롤시 TEXT 애니메이션 처리

    스크롤시 이미지 Parallax 스크롤에 SVG Mask 처리

    3D EBook Flip Animation

    Cross Color Text Reveal

    스크롤시 좌측 이미지 전환

    스크롤시 타이틀 애니메이션

    Efficient Scroll Zoom

    Physic Milestones Timeline

    Side in on Scroll

  • 빠른 웹서버 구동

    빠른 웹서버 구동

    github의 예제 프로젝트나 라이브러리를 받을 때, 데모를 실행시키고 싶을 때가 있다. 그러려면 node나 apache, nginx, iis 등의 웹서버에서 해당 폴더를 설정하고, hosts 파일에서 열어줘야 하는 번거로움이 있다.

    Web Server for Chrome을 사용하면 몇 초 안으로 데모를 띄울 수 있다.

    설치

    1.1. 크롬 설치 후 플레이스토어 접속
    1.2. 검색란에서 Web Server for Chrome 검색
    1.3. 설치

    사용법

    2.1. Web Server 실행

    chrome://apps/ 에 접속 후 Web Server 아이콘을 클릭한다.

    2.2. 설정 및 구동

    Automatically show index.html 설정을 체크한 후 CHOOSE FOLDER로 웹서버를 돌릴 폴더를 선택해주자. 그리고 [su_highlight background=”#ffef3b”]127.0.0.1:8887[/su_highlight] (또는 localhost:8887)로 접속하면 끝!

    Html과 Javascript로 나만의 UI를 만들고 빠르게 확인하는데 좋을 것 같다.
    Service Worker 같은 Https가 필요한 기술도 실행이 가능하다.

  • 무료 폰트 활용하기

    무료 폰트 활용하기

  • 웹 폰트의 이해

    웹 폰트의 이해

    WOFF 포멧은 웹에서 사용하기 위해 만들어지고 다른 조직과 함께 Mozilla에서 개발된 WOFF 글꼴은 OpenType(OTF) 및 TrueType(TTF) 글꼴에 사용되는 구조의 압축 버전을 사용하기 때문에 다른 형식보다 빠르게 로드되는 경우가 많습니다. 이것은 2009년에 개발되었으며 현재 W3C(World Wide Web Consortium) 권장 사항입니다. 이 형식은 글꼴 파일 내에 메타 데이터 및 라이센스 정보를 포함할 수도 있습니다. 이 형식을 모든 브라우저가 지원하는 것 같습니다.

    폰트의 구조

    CSS @font-face 구문

    @font-face {
      font-family: 'FontName';
      src: url('webfont.eot'); /* IE9+ Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff2') format('woff2'), /* Super modern browsers */
           url('webfont.woff') format('woff'), /* Modern browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.svg#FontName') format('svg'); /* Legacy iOS */
    }

    브라우저 지원

    표의 숫자는 해당 형식을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

     ChromeFirefoxOperaSafariIE / Edge
    TTF / OTF43.5103.19[1]
    WOFF53.611.105.19
    WOFF236392310지원되지 않음
    SVG4-37[2]지원되지 않음9-24[2]3.2지원되지 않음
    EOT지원되지 않음지원되지 않음지원되지 않음지원되지 않음6
    [1] 글꼴은 “설치 가능”으로 설정된 경우에만 작동합니다.
    [2] Chrome 38 이상은 Windows Vista 및 XP에서만 SVG 글꼴을 지원합니다.

    웹폰트의 형식

    트루 타입 글꼴/TrueType font (TTF)
    트루 타입은 오랫동안 Mac OS 및 Windows 운영 체제 모두에서 가장 일반적인 글꼴 형식이었습니다. 형식은 가장 기본적인 유형의 디지털 권한 관리를 허용합니다. 작성자가 글꼴 파일을 PDF 파일 및 웹 사이트에 삽입할 수 있는지를 지정하는 삽입 가능 플래그입니다.

    이 형식은 모든 주요 브라우저에서 지원되지만 TTF 글꼴은 IE 9 이상에서 임베디드 비트가 설치 가능으로 설정된 경우에만 작동합니다.

    임베디드 오픈 타입/Embedded Open Type (EOT)
    이 형식은 15년 전 Microsoft (@font-face의 최초 사용자)가 작성했습니다. 이것은 IE8 이하에서 @font-face를 사용할 때 인식할 수있는 유일한 포맷입니다.

    트루 타입 글꼴은 ttf2eot (오픈 소스 유틸리티), eotfast (Windows 전용) 또는 Web Embedding Fonts Tool (Microsoft의 임베디드 웹 글꼴 생성 유틸리티) 을 사용하여 EOT로 변환 할 수 있습니다.

    웹 오픈 폰트 형식/Web Open Font Format (WOFF / WOFF2)
    웹에서 사용하기 위해 만들어지고 다른 조직과 함께 Mozilla에서 개발된 WOFF 글꼴은 OpenType(OTF) 및 TrueType(TTF) 글꼴에 사용되는 구조의 압축 버전을 사용하기 때문에 다른 형식보다 빠르게 로드되는 경우가 많습니다. 이것은 2009년에 개발되었으며 현재 W3C(World Wide Web Consortium) 권장 사항입니다. 이 형식은 글꼴 파일 내에 메타 데이터 및 라이센스 정보를 포함할 수도 있습니다. 이 형식을 모든 브라우저가 지원하는 것 같습니다.

    WOFF 형식은 모든 주요 브라우저에서 지원되었습니다.

    • Firefox 3.6 이후 버전
    • 버전 6.0 이후의 Chrome
    • Internet Explorer 9
    • Opera 11.10 버전 이후
    • 사파리 5.1
    • 다른 WebKit 기반 브라우저는 WebKit 528을 빌드 한 이래로 사용됩니다.

    TTF에서 WOFF 글꼴 파일을 가져 오는 가장 간단한 방법은 sfnt2woff 를 사용하는 것 입니다.

    WOFF2는 차세대 WOFF입니다. 새로운 WOFF 2.0 Web Font 압축 형식은 WOFF 1.0보다 30% 높은 평균 이득을 제공합니다(경우에 따라 최대 50% +).

    WOFF2 브라우저 지원 :

    • Google 크롬 36
    • 오페라 23
    • Firefox 35 (기본적으로 사용 중지됨)

    Google은 TTF에서 WOFF2 글꼴을 만드는 특별한 도구 를 사용합니다.

    SVG (Scalable Vector Graphics font)
    SVG 글꼴은 SVG 이미지의 단일 벡터 객체 인 것처럼 표준 SVG 요소 및 속성으로 표현 된 글리프 윤곽선을 포함하는 텍스트 파일입니다. 그러나 이것은 또한 SVG 글꼴의 가장 큰 단점 중 하나입니다. EOT, WOFF 및 PostScript 맞춤형 OpenType은 글꼴 형식에 압축 기능이 내장되어 있지만 SVG 글꼴은 항상 압축되지 않고 일반적으로 꽤 큽니다. SVG 글꼴의 가장 큰 단점은 글꼴 힌팅을 제공하지 않는다는 것입니다.

    이 형식은 iOS (iPhone, iPad) 용 Safari의 버전 4.1 이하에서만 허용되는 형식입니다. 현재 SVG 글꼴은 Firefox, IE, IE Mobile 및 Opera Mini에서 지원되지 않습니다.

    트루 타입 글꼴은 FontForge로 SVG로 변환 할 수 있습니다 .

    트루 타입 컬렉션/TrueType Collection (TTC)
    TrueType Collection (TTC)은 여러 글꼴을 하나의 파일로 결합 할 수있는 트루 타입 형식의 확장입니다. 따라서 많은 글리프가 함께 사용되는 글꼴 집합에 상당한 공간을 절약 할 수 있습니다. 처음에는 중국어, 일본어 및 한국어 버전의 Windows에서 사용할 수 있었으며 Windows 2000 이상에서는 모든 지역에서 지원되었습니다.

    Mac OS에는 Mac OS 8.5부터 TTC가 지원되었습니다.

  • 배경 이미지 브라우저에 꽉 채우기

    배경 이미지 브라우저에 꽉 채우기

    브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다.
     

    <!DOCTYPE html>
    <html>
    <title>Full Background Cover</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body, html { 
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .bgimg {
        border: 0;
        padding: 0; 
        background-image: url('image.jpg');
        min-height: 100%;
        background-position: center;
        background-size: cover;
    }
    </style>
    <body>
    
    <div class="bgimg"></div>
    
    </body>
    </html>

    첫 번째 방법

    html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

    두 번째 방법

    img.bg {
      /* Set rules to fill background */
      min-height: 100%;
      min-width: 1024px;
        
      /* Set up proportionate scaling */
      width: 100%;
      height: auto;
        
      /* Set up positioning */
      position: fixed;
      top: 0;
      left: 0;
    }
    @media screen and (max-width: 1024px) { /* Specific to this particular image */
      img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
      }
    }

    세 번째 방법

    <img src="images/bg.jpg" id="bg" alt="">
    #bg {
      position: fixed; 
      top: 0; 
      left: 0; 
        
      /* Preserve aspet ratio */
      min-width: 100%;
      min-height: 100%;
    }

    네 번째 방법

    <div id="bg">
      <img src="images/bg.jpg" alt="">
    </div>
    #bg {
      position: fixed; 
      top: -50%; 
      left: -50%; 
      width: 200%; 
      height: 200%;
    }
    #bg img {
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      min-width: 50%;
      min-height: 50%;
    }

    다섯 번째 방법(jQuery 메서드 사용)

    <img src="images/bg.jpg" id="bg" alt="">
    #bg { position: fixed; top: 0; left: 0; }
    .bgwidth { width: 100%; }
    .bgheight { height: 100%; }
    $(window).load(function() {    
    
    	var theWindow        = $(window),
    	    $bg              = $("#bg"),
    	    aspectRatio      = $bg.width() / $bg.height();
    	    			    		
    	function resizeBg() {
    		
    		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
    		    $bg
    		    	.removeClass()
    		    	.addClass('bgheight');
    		} else {
    		    $bg
    		    	.removeClass()
    		    	.addClass('bgwidth');
    		}
    					
    	}
    	                   			
    	theWindow.resize(resizeBg).trigger("resize");
    
    });