ionic 하이브리드 앱 개발 - #4 Component

작성자: -

그리드

뷰의 레이아웃을 정밀하게 제어하기 위해 컴포넌트를 페이지에 배치하거나 정렬하기 위해 ionic에서는 그리드 시스템을 사용합니다. FlexBox기반으로 CSS Flexible Box Layout Module을 사용하여 구현합니다. 장점으로는 열을 고정시키지 않고 행안에 원하는 만큼의 자동으로 너비를 지정해서 만들 수 있습니다. 그리드 시스템은 12 개의 열로 구성되며 각 열은 col- <width> 속성을 설정하여 크기를 조정할 수 있습니다.

image    image    image

소스보기

 

 

버튼

버튼은 앱과 상호 작용하고 탐색하는 필수적인 방법이며 사용자가 탭을 클릭 한 후에 어떤 작업이 발생하는지 명확하게 알려야합니다. 버튼은 텍스트 및 / 또는 아이콘으로 구성 될 수 있으며 다양한 속성으로 향상 될 수 있습니다.
접근성을 위해 버튼은 표준 <button> 요소를 사용하지만 ion-button directive(지시자)로 확장할 수 있습니다.

 

 

Basic

color 속성은 버튼의 색상을 설정합니다. Ionic에는 쉽게 재정의 할 수있는 기본 색상이 많이 포함되어 있습니다.

<button ion-button color="light">Light</button>
<button ion-button>Default</button>
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>

image

 

Outline Style

<button ion-button color="light" outline>Light Outline</button>
<button ion-button outline>Primary Outline</button>
<button ion-button color="secondary" outline>Secondary Outline</button>
<button ion-button color="danger" outline>Danger Outline</button>
<button ion-button color="dark" outline>Dark Outline</button>

 

image

 

Clear Style

<button ion-button color="light" clear>Light Clear</button>
<button ion-button clear>Primary Clear</button>
<button ion-button color="secondary" clear>Secondary Clear</button>
<button ion-button color="danger" clear>Danger Clear</button>
<button ion-button color="dark" clear>Dark Clear</button>

image

 

Round Buttons

<button ion-button color="light" round>Light Round</button>
<button ion-button round>Primary Round</button>
<button ion-button color="secondary" round>Secondary Round</button>
<button ion-button color="danger" round>Danger Round</button>
<button ion-button color="dark" round>Dark Round</button>

image

 

Buttons In Components

<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>

    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-list>
  <ion-item>
    Left Icon Button
    <button ion-button outline item-end icon-left>
      <ion-icon name="star"></ion-icon>
      Left Icon
    </button>
  </ion-item>
</ion-list>

image

 

 

카드

카드는 중요한 콘텐츠를 표시하는 좋은 방법이며 App의 핵심 디자인 패턴으로 급부상하고 있습니다. 이는 정보를 포함하고 구성하고 사용자에게 예측 가능한 기대치를 설정하는 좋은 방법입니다. 한 번에 너무나 많은 콘텐츠를 표시하면, 화면에 주요 정보를 담을 수 없는 경우가 많기 때문에 Google, Twitter 및 Spotify를 비롯한 많은 회사에서 카드 디자인 패턴을 빠르게 도입하게 되었습니다..

모바일 경험을 위해 카드를 사용하면 여러 가지 화면 크기에서 동일한 정보를 시각적으로 쉽게 표시 할 수 있습니다. 그것들은 더 많은 제어를 가능하게하고, 확장성 있게 배치할 수 있습니다. 카드는 대개 서로 위에 놓이지 만 "Page"처럼 사용할 수도 있고 좌우로 쓸어 넘길 수 도 있습니다.

 

Basic Usage

<ion-card>

  <ion-card-content>
    This is just your basic card with some text to boot. Like it?  Keep scrolling...
  </ion-card-content>

</ion-card>

 

image

 

Card Headers

일반 페이지와 마찬가지로 헤더를 포함하도록 카드를 맞춤 설정할 수 있습니다. 카드에 헤더를 추가하려면 카드 내부에 <ion-card-header>  추가하십시오.

<ion-card>
  <ion-card-header>
    Header
  </ion-card-header>
  <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>

image

 

 

Lists In Cards

카드에는 ion-list 가 포함될 수 있습니다. ion-card-content 내부에 ion-list 구성 요소를 추가하여 list를 표시할 수 있습니다.

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-start></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-start></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-start></ion-icon>
      Cafe
    </button>

    <button ion-item>
      <ion-icon name="paw" item-start></ion-icon>
      Dog Park
    </button>

    <button ion-item>
      <ion-icon name="beer" item-start></ion-icon>
      Pub
    </button>

    <button ion-item>
      <ion-icon name="planet" item-start></ion-icon>
      Space
    </button>

  </ion-list>
</ion-card>

image

 

Images In Cards

카드에 이미지를 쉽게 추가 할 수 있습니다. 카드에 이미지를 추가하면 일정한 폭과 가변 높이가 이미지에 부여됩니다. 목록, 헤더 및 기타 카드 구성 요소는 이미지 카드와 쉽게 결합 할 수 있습니다. 

<ion-card>
  <img src="img/nin-live.png"/>
  <ion-card-content>
    <ion-card-title>
      Nine Inch Nails Live
      </ion-card-title>
    <p>
      The most popular industrial group ever, and largely
      responsible for bringing the music to a mass audience.
    </p>
  </ion-card-content>
</ion-card>

image

 

 

Icons

ionic은 우리가 모두 알고 있는 700개 이상의 ionic 아이콘을 제공합니다.

<ion-header>
  <ion-navbar>
    <ion-title>Icons</ion-title>
  </ion-navbar>
</ion-header>

<ion-content text-center class="icons-basic-page">

  <ion-row>
    <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
    <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
    <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
    <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>

    <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
    <ion-col><ion-icon name="people"></ion-icon></ion-col>
    <ion-col><ion-icon name="person"></ion-icon></ion-col>
    <ion-col><ion-icon name="contact"></ion-icon></ion-col>

    <ion-col><ion-icon name="apps"></ion-icon></ion-col>
    <ion-col><ion-icon name="lock"></ion-icon></ion-col>
    <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="unlock"></ion-icon></ion-col>

    <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
    <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
    <ion-col><ion-icon name="pin"></ion-icon></ion-col>
    <ion-col><ion-icon name="locate"></ion-icon></ion-col>

    <ion-col><ion-icon name="mic"></ion-icon></ion-col>
    <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
    <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
    <ion-col><ion-icon name="microphone"></ion-icon></ion-col>

    <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
    <ion-col><ion-icon name="bus"></ion-icon></ion-col>
    <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>

    <ion-col><ion-icon name="camera"></ion-icon></ion-col>
    <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
    <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="pin"></ion-icon></ion-col>

    <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>

    <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
    <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
    <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
  </ion-row>

</ion-content>

image

댓글

댓글 쓰기

주간 인기글

[정보] 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다

작성자: -
이미지
[그림출처]  https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023 인스타그램은 당신의 소리를 '듣고' 있을 수도 있습니다. 문자 그대로. SNS는 사용자들이 자발적으로 공유하는 글, 사진 등의 정보를 모아서 그 데이터를 기반으로 어떤 사용자가 무엇에 관심이 있는지 파악하여 사용자들에게 가장 관심 있을 만한 광고를 보여주곤 합니다. 몇 년 전부터 페이스북은 앱의 마이크 접근 권한 을 사용하여 핸드폰 주위의 모든 대화 등의 소리를 수집.파악하여 폰 사용자가 무엇에 관심 있는지 데이터를 얻고, 타겟 맞춤 광고에 이 정보를 활용한다고 하는 의혹을 받아왔습니다. 페이스북에 인수된 인스타그램도 마찬가지로요. 저도 가끔 의아했습니다. 어떻게 내가 검색창에서 검색한 적도 없고, 사진도 찍은 적 없고, 글로 쓴 적도 없는 어떤 것에 대해서 인스타그램이 나에게, 그것에 관해 얘기한 지 10분 만에 정확히 그와 관련된 상품을 광고로 보여줄 수가 있지? 그런데 동일한 의문을 품은 유저들이 여러 명 있었던 것 같습니다. (관련글  https://www.imore.com/how-stop-facebook-accessing-your-microphone https://medium.com/@damln/instagram-is-listening-to-you-97e8f2c53023  ) 물론  페이스북이나 인스타그램은 공식적으로 '절대로 그렇지 않다' 고 발표하지만, 그렇다고 하더라도 혹시 있을 수 있는 사생활 침해에서 앱의 마이크 접근 권한을 차단하는 것은 나쁘지 않은 것 같습니다. 만약을 위해 사생활을 보호하려면, 페이스북이나 인스타그램 앱 설정 부분에서 페이스북 앱, 인스타그램 앱의 마이크 접근 권한을 비활성화 하시면 됩니다. 1. 아이폰 또는 설정에서 아래로 스크롤해서, 인스타그램 앱을 선택한 다음, 해당 앱의 마이크 권한 비활성화를 해도 됩니
자세한 내용 보기

안드로이드에서 당겨서 새로고침(SwipeRefreshLayout) 쉽게 구현하기

작성자: -
앱을 개발 하다보면 필수 기능중에 하나가 보고 있는 리스트나 상세 페이지등을 새로고침 하는 것 입니다. 몇년 전 까지만 하더라도 새로 고침 기능이라고 하면 아이폰 처럼 뷰를 당기면 공간이 벌어지면서 새로고침 하는 방식을 많이 사용 했습니다.(여전히 이 방법을 사용하는 앱은 많습니다.) 해당 새로고침을 기능을 제공 하려면 개발가 하나하나 구현 해야해서 쉽지 않은 기능 중 하나였습니다. 하지만 지금은 android 레이아웃중 SwipeRefreshLayout을 제공하여 레이아웃만 추가한다면 별다른 구현 없이도 위에서 아래로 내려오는 새로고침 기능을 사용 할수 있게 되었습니다. SwipeRefreshLayout을 간단하게 구현하는 샘플 코드를 작성해 보겠습니다. 1단계 : 레이아웃 새로고침이 될 뷰를 SwipeRefreshLayout으로 자식뷰로 만듭니다.       <android.support.v4.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/swipe_refresh"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webView"></WebView> </android.support.v4.widget.SwipeRefreshLayout> 2단계 : 새로고침 이벤트 해당 뷰 영역을 위에서 아래로 당기면
자세한 내용 보기

[앱 디자인] 벤치마킹에 유용한 사이트

작성자: -
이미지
*이 문서는 지속적으로 업데이트 될 예정입니다. 앱 디자인을 처음으로 시작하면서 많은 자료를 웹에서 찾았는데요, 이미 많이들 아시겠지만 유용한 사이트를 공유하려고 합니다. Behance  [UI, BI, App, Web] https://www.behance.net/ 디자이너들 사이에 가장 유명한 포트폴리오 사이트이지요? ㅎㅎ 지인의 지인이 심플한 아이콘 디자인을 이곳에 올렸다가 애플 본사에서 연락이 와서 채용되었다는 깜짝 놀랄 소식도 들은 적 있습니다. ㅎㅎ 그만큼 디자이너들이 자신의 포트폴리오를 어필할 수 있는 공간이고 퀄리티 높은 작업물들이 아주 많구요. Adobe ID로 로그인해서 마음에 드는 포트폴리오를 저장할 수 있습니다. Dribble  [인터랙션, 모션, 컬러] https://dribbble.com/ 목록에서 보고 싶은 디자인 작업물을 선택한 뒤, 오른쪽에서 원하는 컬러를 선택하면 해당 컬러톤의 디자인 작업물을 찾아줍니다. 원하는 컬러 톤 벤치를 할 때 유용하구요. [1] 원하는 컬러 선택 [2] 선택한 컬러 톤의 디자인 보여줌 또 한가지 강점은 상단 메뉴에 Shots > AnimatedGIFs 를 누르면 인터랙션 GIF 들이 나오는데 꽤 퀄리티가 높습니다. 인터랙션을 벤치마킹할 때 유용합니다. 각종 인터랙션 GIF 그밖에 Dribble 만큼 컬러 톤 벤치하기에 유용한 사이트는 https://brandcolors.net/ 온갖 브랜드의 메인 컬러를 한눈에 보고, 간단한 클릭만으로 색상값을 저장할 수 있습니다. 또 하나는 Adobe Kuler 가 있습니다. https://color.adobe.com/ko/create/color-wheel/ 원하는 색상 조합을 만들어서 공유할 수도 있고, 타인이 올린 색상조합을 저장해서 Photoshop 에서 Color Themes 를 꺼내 사용할 수도 있는 유용한 사이트입니다. https://coo
자세한 내용 보기

[앱 디자인] 디자인 가이드 만들기 - 아이폰

작성자: -
이미지
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^ *아이폰 앱 가이드 작업의 특징 디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로, 이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다. 아이폰 해상도를 먼저 보면 이미지 출처: http://protosketch.io/exporting-assets-for-ios-ipads-and-iphones/ 위에 point 가 실제 폰에서의 크기라면 render at 사이즈는 디자이너가 포토샵에서 작업해야 할 픽셀 단위 사이즈라고 보시면 됩니다. 아이프렌즈펫은 일단 기준 해상도를 iPhone6 으로 잡고 가기로 했습니다. 그래서 포토샵에서 작업할때는 750 x 1334 사이즈로 작업해서 해당 작업물로 좌표값, 크기 등을 계산해서 개발자님께 넘겼구요 만약 iPhone5 를 기준 해상도로 잡았다면 640 x 1136 을 기준으로 포토샵 화면 작업을 해서 넘기시면 됩니다. 그러면 개발자는 디자이너가 계산해 넘긴 수치값의 1/2 을 곱하거나 1.5 배 하는 등 계산을 해서 작업을 하게 됩니다. XCode 에서의 작업 화면 만약 750 기준으로 작업을 해서 드리면 1/2 값을 저기에 입력하는 식으로 작업합니다 여기서 알 수 있는 사실은, 포토샵에서 드리는 수치가 최종값이 아니기 때문에 가급적 모든 수치가 짝수가 되고 , 맞아 떨어지는게 좋습니다. 그래야 개발자가 나누고 곱해도 소수점이 나오지 않기 때문이죠. 그래서 아이프렌즈펫 작업을 할때는 한 이미지로 여러 해상도를 지원해야 하기 때문에 가급적 6의 배수 로 크기를 계산한 작업물을 드렸습니다. *좌표 절대적인 건 아니고.. 대략 저런 기준으로 잡아서 작업하시면 됩니다 ^^ 아이폰은 절대 좌표 로 작업합니다. 그러니까 상단 Status
자세한 내용 보기

[AWS] WinSCP 를 이용해 Linux 인스턴스로 파일 전송하기

작성자: -
이미지
지난 포스팅에서는 Putty 를 활용한 Linux 인스턴스 접속 방법에 대해 알아 보았습니다. 오늘은 이어서  Linux 인스턴스에 파일을 전송할수 있는 WinSCP 활용법에 대해 알아보겠습니다. WinSCP 를 사용하기 위해서는 우선 지난 포스팅에서 Puttygen 을 통해 생성한 PPK 파일이 필요합니다. PPK 파일생성 방법은 [AWS] Windows 에서 Linux 인스턴스 연결을 위한 PuTTY 사용방법 을 참고. 1.  개인 key 를 활용한 서버 접속 방법 아래 링크를 통해 WinSCP 프로그램을 다운로드 합니다. WinSCP 다운로드 -> https://winscp.net/eng/download.php WinSCP 를 설치하고 프로그램을 실행 합니다. 프로그램을 실행하면 바로 로그인 입력 화면이 표출됩니다. 호스트 이름 에 Ec2 인스턴스의 Public IP 또는 Public DNS 를 입력합니다. 사용자 이름 에 접속할 계정 정보 를 입력 합니다. 인증키를 통해 서버에 접속할 예정이므로 설정을 위해 고급버튼 을 선택합니다. * 인스턴스 접속계정 정보는 아래와 같이 구성됩니다. Amazon Linux AMI의 경우 사용자 이름은 ec2-user RHEL AMI의 경우 사용자 이름은 ec2-user 또는 root Ubuntu AMI의 경우 사용자 이름은 ubuntu 또는 root Centos AMI의 경우 사용자 이름은 centos Fedora AMI의 경우 사용자 이름은 ec2-user SUSE의 경우 사용자 이름은 ec2-user 또는 root SSH – 인증 메뉴를 통해 개인키 파일을 등록할 수 있습니다.  SSH 접속을 위해 생성했던 PPK 파일을 선택한 후 확인 을 선택 합니다. 다시 로그인 화면으로 돌아와 로그인 버튼을 선택 합니다. 아래와 같이 인증 절차가 진행됩니다. 인증 완료 후 서버에 접속되고 ec2-user 디렉토리
자세한 내용 보기