브런치 모바일앱 UI - Part 2 글쓰기

 

관련 글

브런치 모바일앱 UI - Part 1 홈, 글목록, 글본문

 

 

브런치 모바일앱 글쓰기

 

 

글쓰기 화면은 3가지 항목으로 구성된다. 

• 제목
• 소제목
• 내용

 

글보기 화면은 제목과 커버이미지를 담고 있는 상단과 하단의 내용으로 구분할 수 있는데 상단을 꾸미기 위해서는 글쓰기 화면의 ‘제목’을 이용하면 된다. 브런치 모바일앱에서 상단영역으로 만들 수 있는 유형은 다음과 같다.

브런치 모바일앱 커버이미지 유형

 

배경

• 배경이미지가 화면에 꽉 채워지도록
• 배경이미지가 정사각틀에 맞춰 채워지고 아래에 내용의 일부가 보여지도록
• 배경이미지 없이 제목만 표시 (배경색 선택 가능, 선택하지 않으면 흰색 배경)

제목 정렬

• 왼쪽이나 가운데 중 선택할 수 있다.
• 세로 정렬은 임의로 정할 수 없다. 배경이미지 세로 사이즈에 따라 정해진다.

 

 

 

커버이미지 만들기

글쓰기 화면에서 제목 우측의 아이콘을 클릭하면 커버 편집 화면이 나온다. 
하단에 도구모음이 자리하고 있다. 도구를 누를 때마다 기능 적용/취소가 토글 된다.

 

 

<커버 편집 도구>
배경이미지, 배경색, 제목 정렬

 

<배경이미지 편집 상태>
배경이미지 세로 영역 변경 도구 등장

 

<배경색 편집 상태>

 

 

제목 글자색 바꾸기

글자색 변경은 배경이미지 없이 배경색이 지정되지 않았을 때(흰색)만 가능하다.

 

 

배경이미지 삽입

배경이미지를 삽입하면 도구 모음의 구성이 약간 바뀐다. 
배경색 도구가 사라지고, 이미지의 세로 영역을 바꾸는 도구가 표시된다. 이미지를 화면에 꽉 차게 표시할건지, 정사각틀에 채우고 아래 내용의 일부가 보이게 할 건지 탭 할 때마다 토글 된다. 배경이미지 도구를 다시 탭하면 현재 배경을 삭제할지 물어본다.
배경에 깔린 이미지는 마치 썬팅한것처럼 원본 이미지 보다 약간 어두워진다. 

 

 

배경색 삽입

10가지 색 중에 고를 수 있다. 마음에 드는 색이 없을 때 배경색 도구를 다시 탭 하면 흰색으로 초기화 된다.
브런치를 둘러보다 보면 느낌이 좋은 커버이미지 중에 배경이미지 없이 흰색으로 깔끔하게 만든 커버가 많다. 커버 아래 살짝 보이는 본문의 내용구성에 따라 오히려 비어있는 상태인 커버가 더 부각되는 것 같다. 

 

커버의 배경이 비어있는 브런치 글

 

 

제목 정렬

정렬 도구를 탭 할 때마다 왼쪽과 가운데로 토글 된다. 세로 정렬은 임의로 조정할 수 없다. 

 

 

 

내용 쓰기

글쓰기에 제공되는 도구는 다음과 같다. 
각 도구를 탭 할 때마다 도구와 키보드 패널이 토글 된다.

 

<본문 편집 도구>
사진, 기타요소, 글자편집, 본문정렬

 

1. 사진
• 사진 선택 후 편집 기능 제공
1. 필터 - 23가지
2. 크롭 - 자유선택 및 5가지 비율 옵션
3. 90도 단위로 회전
• 여러 장 선택 시 ‘그룹으로 올리기’ 제공
• 본문에 사진 삽입 후 사진을 탭하면
1. 사진 아래에 설명 입력 가능
2. 사진의 좌우 여백 유무 선택
3. 사진편집으로 이동, 삭제
2. 기타요소
• 동영상 삽입
• 장소링크 삽입 (다음지도 연결)
• 스티커 삽입
• 구분선 삽입
3. 글자편집
• 글자색 / 글자배경색 / 두껍게 / 밑줄 / 취소선
• 제목 스타일 3종류 / 본문 스타일 1종류
• 강조 또는 인용문 스타일 3종류 / 목록 스타일 1종류 / 링크설정
4. 본문정렬
• 왼쪽 / 가운데

 

 

 

사진 삽입

사진 아이콘을 탭하면 카메라롤의 사진들을 보여준다. 이곳에서 사진을 고른다.  네비게이션바의 '카메라롤'을 탭하면 폴더 목록을 볼 수 있다. 

 

*그룹으로 삽입한 사진의 배치 변경

사진을 꾹 누르고 기다리면 화면이 아래와 같이 바뀌는데 이때 손을 때지 말고 드래그를 하면 배치를 바꿀 수 있다. 드래그를 하는 동안 사진이 들어갈 수 있는 위치에 녹색 라인으로 가이드를 준다.

 

*그룹 편집 도움말

이 기능을 처음 사용할 때 아래와 같은 안내를 보여준다.

 

 

사진 편집 기능 – 필터, 크롭, 회전

 

 

사진 설명 및 좌우여백

글쓰기 상태에서 사진을 탭하면 사진에 녹색 테두리가 표시되면서 하단에 편집 도구가 나타난다. 이 상태에서 사진 좌우의 여백 설정과 사진 아래에 설명을 적을 수 있다. 사진편집 모드로 이동하거나 삭제를 할 수도 있다. 

 

한 줄에 여러 장의 사진이 배치된 경우에는 사진 아래에 설명을 입력할 수 없다. 한 줄에 한 장의 사진이 들어간 경우에만 가능하다.

사진설명 입력 기능을 이용하지 않고, 임의로 사진 아래에 텍스트를 입력하고 가운데 정렬로 만들기는 불가능하다. 글쓰기 화면에서 정렬은 본문 전체를 대상으로 바꾼다. 내용 일부를 선택해서 정렬을 바꿀 수 없다. 

 

 

 

기타요소 삽입

동영상, 장소링크, 스티커, 구분선을 삽입할 수 있다.

 

동영상 삽입

 

 

장소링크 삽입

 

 

스티커 삽입

 

 

구분선 삽입

 

*장소링크, 스티커, 구분선 삭제 방법

요소를 탭하면 요소 주변에 녹색 테두리가 표시되면서 하단에 휴지통 아이콘이 나타난다.

 

 

 

글자편집

글자에 스타일을 적용하는 방법은 두 가지다.

• 입력하려는 곳에 커서가 위치한 상태에서 옵션 지정 후 글을 입력하면 스타일이 적용된다. 
• 입력 후 단어를 꾹 눌러서 선택 후 옵션 패널을 열어 지정한다.

 

스타일 적용

 

 

목록 스타일

목록 스타일이 적용된 글자에는 색상 변경이나 밑줄 등 다른 스타일을 지정할 수 없다.

 

 

강조 또는 인용문 스타일

 

 

링크 스타일

  

 

 

본문 정렬

정렬 도구를 탭하면 본문 전체가 정렬된다. 글의 일부만 선택해서 정렬을 바꿀 수 없다.

 

여기까지 스마트폰용 브런치 모바일앱 글쓰기 UI를 살펴보았다. 

테스트 디바이스 iPhone6