발표자료 작성

팀원이 제작한 pdf파일에 맞춰 상세내용 취합후 대본을 적었다.

 

-상세 내용

로그인 화면

• User: 회원가입한 유저 정보를 키는 아이디, 값은 User클래스 인스턴스로 해서 해시맵 저장한다. 또한 User클래스는 Parcelable을 상속받아 intent를 통해 액티비티간에 주고받을 수 있게 하였다.
• android:configChanges: AdroidManifest에서 android:configChanges속성값을 추가해 화면 방향 전환시 재시작되어 회원가입정보가 날아가는것을 방지하였다.
• registerForActivityResult: 회원가입화면으로 넘어갈시 다시 돌아올때 회원가입한 유저 정보를 받아와 해시맵에 저장하도록 하였다.

회원가입 화면

• toolbar: 툴바를 이용하여 상단 타이틀과 뒤로가기 버튼을 구현하였다.
• Regex: Regex를 이용하여 아이디와 비밀번호 형식을 정규표현식으로 지정하였고 matches()함수를 통해 체크하도록 하였다.
• 아이디 중복체크: 로그인 화면에서 받아온 아이디 키값들로 중복체크를 하였다.
• addTextChangedListener: 아이디 중복체크 후, 아이디를 바꾼다면 다시 중복체크를 받아야 하도록 editText상의 변화를 addTextChangedListener를 통해 감지하도록 하였다.

[홈 화면 대본] - 8p

• 2개의 ScrollView 사용

• 한 화면에서 Horizontal ScrollView와 일반 ScrollView를 동시에 처리했습니다. 최종 테스트를 하는 과정에서 Landscape 모드로 전환시 팀원들이 찾아준 버그가 있었는데, 화면 방향을 전환할 경우 앱튕김 현상이었습니다. Portrait 모드와 Landscape 모드의 xml에서 두 scrollView에 같은 id값을 준 것이 원인이었기 때문에 이를 다르게 줌으로서 해결했습니다.

• 카페 메뉴 순서 랜덤 노출

• Horizontal ScrollView에 있는 여러 카페 메뉴들을 랜덤으로 노출될 수 있도록 shuffled 처리 해주었습니다. 또 상세페이지로 연결될 때에도 각 화면에 잘 들어갈 수 있도록 Intent에 menuKey 값을 넣어 보냈습니다.

• 원형 ImageView 처리

• drawable 폴더에 background를 생성하여 원형 ImageView를 만들 수 있었습니다.

• 더보기 활성화

• 피드 본문 내용 중 글자수가 2줄 이상 넘어가는 경우에는 elipse로 말줄임표를 표시해줬고 더보기 버튼을 추가했습니다. 더보기 버튼을 누르는 경우에는 본문이 펼쳐져 전문을 조회할 수 있습니다.

• UserData 관리

• 로그인 할 때 로그인 화면에서 받아온 UserData 중 name값만 앱바에 적용하여 처리하고 이를 다시 마이페이지로 이동할 때 Intent에 담아 보낼 수 있도록 했습니다.

[ 상세 화면 ] - PDF p8

• 원형 ImageView 처리

• 상세 페이지의 메뉴 구성품 사진을 원 모양으로 보이게 하기 위해 drawable 폴더에 원형 백그라운드를 생성하고, clipToOutline 속성을 이용해 처리했습니다.

• 반응형 디자인 적용

• 메뉴 이름이 길어지는 경우, 메뉴와 나란히 있는 사용자 이름과 작성 날짜가 메뉴 이름 아래로 오게 해 다양한 길이의 메뉴 이름을 잘림 없이 표시할 수 있게 했습니다.

• 더보기 활성화

• 텍스트뷰가 길어지는 경우 레이아웃에 맞게 줄어들게 되고, 더보기 버튼을 클릭하면 전체 내용을 볼 수 있게 구현했습니다.

• Menu Class 전역 관리

• Parcelable을 상속 받은 메뉴 클래스를 만들어 Intent로 전달 가능하게 구현했습니다.
• 메뉴 목록은 Object로 만들어 전역으로 관리할 수 있게 처리했습니다.

[마이 페이지 대본] - 10p

• 원형 imageview 처리.

• radius가 적용되어 있는 background용 drawable을 imageview에 적용해 주었습니다. 원형은 shape를 oval로, 모서리가 둥근 모양은 radius를 적용해서 원형 imageview를 처리했습니다.

• userData 관리

• 이전 화면에서 보내준 Parcelable 데이터를 putExtra로 받아와 클래스 데이터를 사용해 사용자 정보를 보여주었습니다.

• 사용자 프로필 랜덤 노출

• 사용자의 프로필 사진만 모아 놓은 리스트를 생성하고 그 리스트를 shuffled() 함수를 이용해 랜덤으로 섞어서 나온 첫 번째 사진을 프로필 사진으로 설정해 프로필 이미지가 랜덤으로 보이게 구현했습니다.

• 더보기 활성화

• 사용자 프로필 사진의 하단에 위치한 사용자 소개글이 1줄 이상인 경우에 ellipsize를 적용해 1줄이 넘어가지 않도록 설정해 줬고, 텍스트가 클릭되었는지 알 수 있는 state 변수를 생성해 텍스트를 클릭했을 때, state 상태에 따라 textView의 maxLined을 5 와 1로 번갈아가면서 조정해 노출되는 텍스트 양을 설정해 주었습니다.

• 메뉴 랜덤 노출

• 외국어 처리를 위해 메뉴 정보를 string.xml에서 string-array 태그로 메뉴의 title, 메뉴 설명을 담아 주었습니다. 생성한 string-array를 받아와 랜덤으로 메뉴를 보이게 하도록 구현했습니다. 덤으로 외국어(영어)처리까지 해주었습니다.

[아이덴티티1 화면 대본] - 11p

• Lottie 애니메이션 적용

• 앱바 부분의 로고를 꾹 누르면 화면 정중앙에 로티 애니메이션을 등장하도록 구현 했습니다. setOnLongClickListner 함수를 이용하여 꾹 누르는 것을 감지할 수 있도록 하고 로티 애니메이션 의존성을 추가해 애니메이션을 만들 수 있었습니다. 여담으로 로티 공식 홈페이지에서 제공하는 무료 애니메이션들 중 안드로이드를 지원하지 않는 것들이 많아 직접 만들어본 하트 애니메이션입니다!

[아이덴티티2 대본]

• 사용자 편의성을 위해 추가한 조화로운 6조만의 두 번째 아이덴티티는 바로 네이버 지도로 연결되는 기능입니다.
• 메뉴 사진을 짧게 2번 이상 누를 경우 이벤트 리스너가 작동해 해당 메뉴와 관련있는 카페의 네이버 지도 화면을 보여줍니다.
• 암시적 인텐트를 이용해 기기의 크롬 앱을 열어 화면이 표시되게 처리했습니다.