기본 콘텐츠로 건너뛰기

개발일기 # 번외편3 : 앱의 디자인에 대한 평가 받아 보기


원본출처: 티스토리 바로가기

창업 디자이너. 창디

앱을 구현하다 보면 아무래도 개발자로만 지내면서 감히(?) 도전해 보지 않았던 디자인과 관련된 이슈를 마주 하게 됩니다. 그래서 이번엔 어느 디자인 전문가님에게 앱의 기본 디자인에 대한 평가(?)를 받아 보기로 했습니다. 

 

창업디자이너 창디

https://www.instagram.com/changdi.designer/

별 그램에서 디자인에 관한 글을 많이 포스팅하시는 분이 무료 이벤트를 하신다고 하여 얼른 손(?)을 들어 보았답니다. 

창업 디자이너. 창디님 이라고 하시더라고요.

 

화면디자인 설계

 

초안과 검토전 디자인

처음 이미지는 처음 만들어 가던 화면 디자인이고,  다음 이미지는 창디님에게 조언을 듣기 위해 전달드렸던 이미지입니다.  개인적으로 파란색을 좋아해서  온통 스머프(?)가 생각나는 색상으로 도배(?)를 했더랍니다.  이제 창디님의 조언을 들어 보겠습니다. 

 

 

창디님의 혹독한(?) 디자인 평가 듣기

평가를 듣고 나서

1. 배경색은 하얀 배경으로 했던 건데, 노란색이 되면 어떨까 하는 생각에서 칠했던 것이고, 
2. 폰트도 귀엽기는 하죠... nano sans 등의 폰트를 찾아보겠습니다.
3. 파란색은 그냥 개인적으로 좋아하는 색이고요.
4. 각 item들끼리 묶어서 분명해지도록 해야겠고요.
5. 글자의 색에 대해서도 쉽게 black으로만 썼었는데... dark gray 공감이 확 옵니다.
   dark blue는 안될까요? 

 

이런 정도의 복습(?) 의견을 드리긴 했습니다. 그리고 이제 수정된 디자인에 도전을 해 보았습니다. 

 

수정된 디자인

수정한 디자인

 

배경색은 무채색을 강조하셨는 데, 변경한 배경색이 무채색 같지는 않습니다. 

 

폰트는 나눔 고딕 정도로 수정해 보았습니다. 

파란색은 개인적으로 많이 좋아해서 버리지 못했습니다. 

 

아이템들은 그룹화를 해서 구분이 수월하게 해 보았습니다. 

 

글자색도 dark gray로 변경해 보았습니다. 

 

확 와닿은 건 글자색을 확실한 black으로 한다는 말씀이었습니다. 일반적으로 디자인을 배워 보지 못한 이들은 white와 black으로 대비되는 색을 적용해 보게 됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이렇게 수정된 화면 디자인은 어떤가요?

 

귤탐 당도선별 감귤 로열과, 3kg(S~M), 1박스 삼립 호빵 발효미종 단팥, 92g, 14개입 [엉클컴퍼니] 우리밀 찐빵/흑미찐빵/단호박찐빵/고구마찐빵 국산팥, 우리밀 고구마찐빵(20개입) 1300g 국산팥 우리밀 MORIT 여성용 방한장갑 터치스크린 다용도 고급겨울장갑 에이치머스 스마트폰 터치 방한 장갑
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

댓글

이 블로그의 인기 게시물

개인정보처리방침 안내

 billcoreaTech('https://billcoreatech.blogspot.com/'이하 'https://billcoreatech.blogspot')은(는) 「개인정보 보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다. ○ 이 개인정보처리방침은 2021년 8월 26부터 적용됩니다. 제1조(개인정보의 처리 목적) billcoreaTech('https://billcoreatech.blogspot.com/'이하 'https://billcoreatech.blogspot')은(는) 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다. 1. 서비스 제공 맞춤서비스 제공을 목적으로 개인정보를 처리합니다. 제2조(개인정보의 처리 및 보유 기간) ① billcoreaTech은(는) 법령에 따른 개인정보 보유·이용기간 또는 정보주체로부터 개인정보를 수집 시에 동의받은 개인정보 보유·이용기간 내에서 개인정보를 처리·보유합니다. ② 각각의 개인정보 처리 및 보유 기간은 다음과 같습니다. 1.<서비스 제공> <서비스 제공>와 관련한 개인정보는 수집.이용에 관한 동의일로부터<사용자의 설정시간>까지 위 이용목적을 위하여 보유.이용됩니다. 보유근거 : 앱의 기본기능 활용에 필요한 위치정보 제3조(개인정보의 제3자 제공) ① billcoreaTech은(는) 개인정보를 제1조(개인정보의 처리 목적)에서 명시한 범위 내에서만 처리하며, 정보주체의 동의, 법률의 특별한 규정 등 「개인정보 보호법」 제17조 및 제18조에 해당하는 경우에만 개인정보를 제3자에게 제공합니다. ② billcoreaTech

안드로이드 앱 만들기 : jetpack compose URL 에서 image 받아와서 보여 주기 (feat coil)

원본출처: 티스토리 바로가기 샘플 이미지 오늘은 앱을 만들면서 이미지를 보여 주어야 하는 경우 중에  URL에서 이미지를 가져와 보는 것에 대해서 기술해 보겠습니다.  URL에서 image를 가져온다는 것은 서버에 저장된 image 일수도 있고, SNS profile의 image 정보일수도 있을 것입니다.    구글에서 찾아보면 다른 것들도 많이 있기는 합니다.  그 중에서 coil 라이브러리를 이용해서 한번 만들어 보도록 하겠습니다.    gradle 설정 그래들 설정은 아래 한 줄입니다. 현재 시점에서 최신 버전인 것으로 보입니다.  이 글을 보시는 시점에 최신 버전이 아니라면 아마도 android studio는 추천을 해 줍니다. // image load from url implementation("io.coil-kt:coil-compose:2.2.2")   manaifest  설정 당연한 이야기 겠지만, url에서 이미지를 받아 와야 하기 때문에 권한 설정을 해야 합니다. 또한 인터넷에서 자료를 받아 오는 것은 지연이 발생할 수 있기 때문에 application에서도 다음 문구의 추가가 필요합니다.  <uses-permission android:name="android.permission.INTERNET" /> <application ... android:networkSecurityConfig="@xml/network_config" ... /> 이 설정을 하게 되면 xml 파일을 하나 추가해 주면 됩니다.  network_config.xml 이라는 이름으로 말입니다.  <?xml version="1.0" encoding="utf-8"?> <network-security-config> <domain-config cleartextT