Laravel 프로그램을 개발하려면 php Composer가 필수인데 mac에서 composer 설치하는 방법을 찾아보니 curl을 써서 설치하는 방법이 대부분 입니다. mac에서 설치를 편하게 하자고 하는 패키지가 brew이므로 brew에 composer를 설치하는 방법이 있을 것 같아서 찾아보니 brew를 이용한 설치법이 있더라구요 복잡하게 안하고 한줄로 됩니다.
모바일 우선 접근 방식은 점진적 향상(progressive enhancement)의 주안점이다. 모바일 디자인은 가장 어려운 일인 만큼 먼저 해야 한다는 것이 이념이다. 모바일 디자인 질문에 대한 답을 얻으면 다른 장치를 위한 디자인이 더 쉬워진다. 요약하자면 가장 작은 디자인에는 필수 기능만 있을 것이므로 즉시 UX의 핵심을 디자인한 것이다.
반대 접근 방식은 단계적 저하(graceful degradation)이다. 이것은 처음부터 모든 복잡성을 통합하고 나중에 더 작은 장치를 위해 제거한다. 단계적 저하의 문제는 처음부터 모든 포괄적 디자인을 구축할 때 핵심 요소와 보조 요소가 병합되어 구별 및 분리가 더 어려워진다는 것이다. 전체 철학은 경험을 “축소”하고 있기 때문에 모바일 디자인을 사후 고려 사항으로 취급할 위험이 있다.
우리는 다른 사람들과 함께 모바일 우선 접근 방식을 통한 점진적 개선을 강력히 권장한다. 이 게시물에서는 팁과 기술을 설명하고 모바일 우선 워크플로를 사용하여 가상의 웹사이트를 구축하는 실습 강의로 마무리한다.
모바일 우선(Mobile-First) = 콘텐츠 우선(Content-First)
귀하의 사이트가 모바일 장치에서 좋다면 모든 장치에서 더 잘 해석된다. 하지만 더 중요한 것은 모바일 우선 접근 방식이 콘텐츠 우선 접근 방식이기도 하다는 것이다. 모바일에는 몇 가지 예를 들자면 가장 많은 제한 사항, 화면 크기 및 대역폭이 있으므로 이러한 매개 변수 내에서 디자인하면 무자비하게 콘텐츠의 우선 순위를 지정해야 한다는 것이다.
모바일 우선 접근 방식은 유기적으로 더 콘텐츠 중심적이며 따라서 사용자 중심적인 디자인으로 이어진다. 사이트의 핵심은 콘텐츠이다. 바로 이것이 사용자가 존재하는 이유이다.
그러나 한 가지 주의할 점은 모바일 사용자는 때때로 데스크톱 사용자와 다른 콘텐츠가 필요하다는 것이다. 기기별 콘텐츠는 컨텍스트를 고려하여 측정할 수 있다. 즉, 주어진 상황과 주어진 환경에서 사용자가 더 높이 평가할 사항은 무엇인지? 이를 미리 계획하는 가장 좋은 방법은 사용자 시나리오를 만드는 것이다.
모바일 우선 접근 방식의 또 다른 이점은 작은 화면 중단점(breakpoints)이 콘텐츠 주위에 더 잘 맞을 수 있다는 것이다. 다시 말하지만, 대안은 더 나쁘다. 이미 통통한 디자인을 작은 프레임워크에 짜넣어야 하는 것이다. 그러나 모바일 우선 접근 방식을 사용하면 콘텐츠 주변에 자연스럽게 중단점(breakpoints)이 생성되므로 어색한 편집이 필요하지 않는다.
2. 시각적 계층 구조(Visual Hierarchy) – 콘텐츠 인벤토리의 요소에 우선 순위를 지정하고 가장 중요한 요소를 눈에 띄게 표시하는 방법을 결정한다.
3. 가장 작은 중단점(breakpoints)으로 디자인한 다음 확장 — 모바일 와이어프레임을 먼저 구축한 다음 이를 더 큰 중단점(breakpoints)의 모델로 사용한다. 공백이 너무 많이 생길 때까지 화면을 확장한다.
4. 터치 대상 확대 — 손가락은 픽셀 단위의 정확한 마우스 커서보다 훨씬 넓기 때문에 탭할 더 큰 요소가 필요하다. 이 글을 쓰는 시점에서 Apple은 터치 대상에 대해 44픽셀 정사각형을 권장한다. 하이퍼링크에 충분한 공간을 제공하고 버튼을 약간 확대하고 모든 대화형 요소 주위에 충분한 공간이 있는지 확인하자.
5. 호버링에 의존하지 말자 — 거의 당연한 이야기지만 디자이너는 종종 인터랙티브 작업에서 호버 및 마우스오버 효과에 의존한다. 모바일 친화적이라고 생각한다면 하지 않는것이 좋다. 아직 손끝에 대한 호버 컨트롤이 없다.
6. “APP”을 생각하라 — 모바일 사용자는 경험의 움직임과 약간의 제어에 익숙하다. 캔버스 외부 탐색 , 확장 가능한 위젯, AJAX 호출 또는 사용자가 페이지를 새로 고치지 않고도 상호 작용할 수 있는 화면의 기타 요소에 대해 생각해 보자.
7. 큰 그래픽 피하기 — 가로 사진과 복잡한 그래픽은 화면 너비가 몇 인치에 불과할 때 잘 표시되지 않는다. 휴대용 화면에서 읽을 수 있는 이미지로 모바일 사용자를 수용한다.
8. 실제 장치에서 테스트 — 웹사이트가 얼마나 유용한지(또는 그렇지 않은지) 스스로 발견하는 것보다 좋은 것은 없다. Desktop/Notebook 컴퓨터에서 벗어나 실제 휴대폰이나 태블릿에 제품을 로드해보자. 페이지를 탭하고, 사이트 탐색이 쉬운지~? 적시에 로드되는지~? 텍스트와 그래픽이 읽기 쉬운지~?
장치마다 화면 크기와 방향에 따라 다른 레이아웃이 필요하다는 점을 감안할 때 사용자를 위해 여러 배열을 디자인하는 것이 좋습니다. 운 좋게도 Figma에서 바로 반응형 또는 적응형 변형을 만들 수 있다.
예제를 만들고 스마트폰에서 태블릿 및 데스크톱 보기로 콘텐츠를 확장하는 방법을 설명한다. 계속해서 예제를 만들고 아래를 따라해 보자.
콘텐츠 우선 순위 설정
“모바일 우선 접근”은 “데스크톱 우선”과 다르다. 더 작게 디자인할 때 잘라내지 않고 점차적으로 더 큰 레이아웃에 정보를 추가한다. 모바일을 생각한다는 것은 정보를 제거한다는 의미가 아니다. 정보를 1차, 2차, 3차 콘텐츠로 분류하는 것을 의미한다.
이 예에서 우리는 홈 페이지에 회사 이름 및 제품 링크와 같은 특정 요소가 있어야 한다는 것을 알고 있다. 블로그 게시물도 나쁘지 않을 것이다. 그러나 우리가 말했듯이 모든 것이 스마트폰 보기에 맞지는 않으므로 사이트의 목표인 자전거 판매를 달성할 수 있는 항목에 따라 우선 순위를 설정한다.
1. 최신형 자전거
2. 베스트 셀러 바이크
3. “나에게 딱 맞는 라이드 찾기” CTA
4. 회사명 및 히어로 이미지
5. 내비게이션
6. 검색
7. 두 번째로 많이 팔린 자전거
8. 상품권
9. 추천서
10. 최신 블로그 게시물
주문한 목록을 기반으로 우리의 작업이 판매를 얻는 디자인 문제를 해결할 것이라는 확신을 가지고 만들 수 있다.
스마트폰 보기
사용자는 얼마나 필요할까~?
모바일 우선을 생각하면 무엇이 정말 중요한지 생각하게 한다. 이 스마트폰 보기에서 가장 많이 팔린 자전거와 최신 모델은 판매로 직접 연결되므로 상품권, 덜 인기 있는 모델, 최신 뉴스와 같은 다른 항목을 내부 페이지에 남겨둘 수 있다. 마지막 클릭 유도문안은 특히 눈에 잘 띄며 손가락을 한 번만 탭하면 쉽게 칠 수 있다.
태블릿 보기
태블릿 크기의 보기용으로 디자인할 때 추가 제품(예: “축전기”)과 같은 2차 정보를 더 잘 추가할 수 있다. 또한 페이지 상단의 탐색을 확장하고 실제로 판매로 이어지지 않고 판매를 장려하는 콘텐츠, 즉 고객 평가를 추가할 수 있다.
더 많은 옵션을 사용할 수 있기 때문에 스마트폰 UI에 무엇을 포함할지 결정하는 것보다 훨씬 더 어려울 수 있다. 2차 요소와 3차 요소의 차이는 모호한 선이고 모든 것을 포함하고 싶은 유혹이 강하다.
충동에 저항해보자~ 정렬된 콘텐츠 목록을 사용한다. 스마트폰과 마찬가지로 공간은 여전히 제한적이다.
데스크탑 보기
마지막으로 데스크탑 보기는 중요하다고 결정한 만큼 많은 정보를 지원할 수 있다. 여기에서 홈 페이지는 적합 여부에 관계없이 적합하다고 생각하는 모든 정보를 수용할 수 있다. 포함된 몇 가지 추가 콘텐츠를 확인해 보자.
상품권
고객 평가
최신 Lightning Bolt 자전거 탐색 블로그 게시물
장치에 적합한 레이아웃을 직접 디자인하기
Figma을 사용하는 경우 이러한 보기에 대해 다른 레이아웃을 만드는 것은 상당히 쉽다.
Figma 프로토타입을 연다.
Figma 편집기의 오른쪽 하단에 있는 “새 적응형 버전 추가”를 탭합니다.
미리 설정된 크기를 선택하거나 고유한 크기를 입력합니다.
처음부터 모든 것을 다시 만들 필요는 없다. 디자인 요소를 복사할 크기를 선택한다.
캔버스 위의 다양한 크기를 탭하여 중단점(breakpoints) 사이를 전환하고 필요에 맞게 각각을 조정한다. 모바일 우선 프로토타이핑을 직접 시도하고 싶다면 Figma에서 시작해 보자.
Google 크롬 브라우저는 전체 크기의 웹페이지 스크린샷을 캡처하는 두 가지 방법을 제공한다. 이것은 디자이너, 프로그래머, 편집자, 관리자, 작가, 분석가 또는 기타 가능한 웹 기반 작업에 관계없이 많은 웹 작업자에게 필요하거나 유용할 수 있다.
Chrome으로 전체 크기의 웹페이지 스크린샷을 캡처하기 위해 다룰 접근 방식을 사용하려면 Mac, Windows, Linux 및 Chromebook을 포함한 모든 데스크톱 수준 장치에 대해 전체 버전의 Chrome이 필요하다. Chrome에 내장된 개발자 도구(developer tools)를 사용할 것이기 때문에 플러그인이 필요하지 않는다.
여기서는 데스크톱용 Chrome 브라우저를 다룬다. 필요하거나 선호하는 경우 Firefox , Mac 용 Safari, iPhone 및 iPad용 Safari 로 전체 페이지 스크린샷을 찍을 수도 있다.
Chrome에서 전체 크기 스크롤 스크린샷을 캡처하는 방법
Chrome에서 웹페이지의 전체 크기 스크린샷을 캡처할 준비가 되었다면 수행할 작업은 다음과 같다.
1.
Chrome 뉴에서 개발자 도구 열기 ( View > Developer > Developer Tools ) 또는 오른쪽 상단에 점 세 개 아이콘을 클릭하면 ‘도구 더 보기‘에 ‘개발자 도구‘ 메뉴를 클릭한다.
⌘ Command + ⇧ Shift + P (윈도우 Crtl + Shift + P) 누르면 선택 창이 뜬다.
입력란에 Capture full size screenshot라고 입력하면 아래 목록에 나타나며 클릭하면 png 파일로 다운된 것을 알 수 있다.
Console을 통해 Chrome에서 전체 페이지 스크린샷 캡처
Chrome에서 전체 페이지 스크린샷을 찍는 또 다른 방법은 개발자 콘솔 ‘Run’ 명령을 사용하고 “screenshot”을 입력한 다음 나타나는 옵션에서 “Capture full size screenshot”를 선택하는 것이다. 이 작업을 수행하기 전에* 전체 웹페이지를 스크롤해야 한다.
이것은 일부 사용자에게는 더 나은 옵션일 수 있지만 명령줄(command lines)에 익숙하지 않은 사용자에게는 조금 더 복잡하다.
간단한 방법으로는 한글을 빠르게 모음과 자음을 타이핑하다 보면 완성되는 부분에서부터 원하는 입력을 시도하면 된다. 그래도 분리 현상이 지속될 때에는 아래의 방법을 시도해 보자.
macOS 시스템 환경설정에서 키보드 항목을 선택하여 이동한다.
macOS 환경설정 > 키보드 선택
키보드 설정에서 두 번째 tab 텍스트를 선택하여 맞춤법을 ‘한국어’로 선택한다.
환경설정 > 키보드 > 텍스트 설정
한국어로 변경 후에 추가 옵션 체크박스 4가지 항목 모두 해제되어 있는지 확인 한다.
맞춤법 자동 수정 / Correct spelling automatically
자동으로 문장을 대문자로 시작 / Capitalize words automatically
스페이스를 두 번 눌러 마침표 추가 / Add period with double-space
스마트 인용 부호 및 대시 사용 / Use smart quotes and dashes
위의 설정을 모두 마친 후에 피그마를 다시 실행하면 텍스트 자음/모음 분리 현상이 해결된 것을 확인 할 수 있다.
위와 같은 한글 입력의 오류 현상은 2byte 문자를 사용하는 Non 알파벳, Non 로만의 글자에서 발생할 것으로 생각된다. 우리말의 경우에도 초성, 중성, 종성이 있어서 이를 조합하는 문자의 형태이기 때문에 글자를 어느 정도 입력한 후에 엔터를 치거나 커서를 움직이면 아직 글자 입력이 어디서 종결되었는지 불분명하여 프로그램이 이 부분을 처리하는 체계를 아직 갖추지 못하고 있기 때문이다.
설정 후 문제가 지속된다면 한글 입력하면서 문장이 종결되면 ‘스페이스바를 한번 누르고, 백스페이스를 다시 누른다.’ 한글을 입력하면서 문장 중 엔터를 쳐야 한다면, 마찬가지로 엔터를 치기 전에 ‘스페이스바를 한번 누르고, 백스페이스를 다시 누르고 엔터를 친다.’
