[TIL][내일배움캠프]

[내일배움캠프][TIL] 24.02.28 (수) - 최종 프로젝트 2주차 : 개발 3일차

kimlaurant 2024. 2. 28. 22:45
1. 최종 프로젝트 2주차

 

어제까지 내가 맡은 부분에 대한 레이아웃을 전반적으로 완성시켜놨다.

오늘부터는 본격적으로 기능을 구현하기 시작했다.

 

과연 오늘은 몇 개의 기능을 구현할 수 있을까?

 

 

RecyclerView 자동스크롤 + 무한스크롤

 

우선, 가장 먼저 구현할 사항은 다음과 같다.

 

바로 MountainDetailActivity에 있는 저 산 이미지 파일을 자동 스크롤로 보여주는 것.

그리고 이걸 반복해서 보여주는 것.

 

예를 들어서, 산 이미지가 5개 있으면 1번부터 5번까지 차례대로 보여준 다음, 5번 다음에는 다시 1번으로 되돌아가는 식으로 구현하고자 한다.

 

즉, 무한 스크롤 + 자동 스크롤 두 가지를 동시에 구현하려 한다.

 

무한 스크롤은 Adapter 내에서 다음처럼 작성하면 된다.

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        val binding = ItemAdapterMountainBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return Holder(binding)
    }

    override fun onBindViewHolder(holder: Holder, position: Int) {
		val realPosition = position % itemList.size
    
            holder.binding.ivMountain.setImageResource(mItems[realPosition].img)
    }

    override fun getItemCount(): Int {
        return Int.MAX_VALUE
    }

    inner class Holder(val binding: ItemAdapterMountainBinding): RecyclerView.ViewHolder(binding.root){
        private val mountainImage = binding.ivMountain
    }

 

그리고 자동스크롤은 Activity에서 

recyclerView.smoothScrollToPosition(position)

를 사용하면 된다.

 

 

문제는 현재 산 이미지를 API로 받아올 수 없기 때문에 직접 data class에 집어넣어야 한다는 것.

 

그리고 여기서 고민이 하나 생겼다.

 

 

어떻게 data class 안에 정리할까?

 

 

예를 들어서, 한 산에 이미지 파일이 5개 있다 치자.

그런데 보통 데이터를 집어넣을 때에는 하나하나 따로따로 집어넣지 5개를 한꺼번에 넣지 않는다. 애초에 동일한 이름의 이미지 파일을 여러 개 집어넣을 일이 없었으니 말이다.

 

내가 원하는 방식은

산 이름이 "한라산"이면 "한라산"이라는 객체가 포함된 이미지 파일들만 쏙쏙 뽑아서 받아오고 싶은데

그걸

SanDetailImageData("한라산", R.drawable.img_hanrasan1),
SanDetailImageData("한라산", R.drawable.img_hanrasan2),
SanDetailImageData("한라산", R.drawable.img_hanrasan3),
SanDetailImageData("한라산", R.drawable.img_hanrasan4),
SanDetailImageData("한라산", R.drawable.img_hanrasan5)

// data class SanDetailImageData (val mountain: String, val img: Int)

 

이렇게 하면 과연 받아올 수 있을까?

 

 

그리고 이걸 고민하고 있을 때, 변수 하나가 생겼다.

 

 

디자인 피드백

 

바로 우리가 만든 Figma의 와이어프레임 디자인에 대한 피드백이 들어온 것.

 

저번에 피드백을 받은 이후, 다시 피드백을 받게 되었는데 꽤나 많았다.

 

 

[커뮤니티]

  • 타이틀을 구분하기 위해 볼드체를 사용하면 좋을 것 같다
  • 선택되지 않은 카테고리는 명확히 구분하기 위해 텍스트를 회색을 사용하는게 좋다
  • 좋아요 텍스트 색생이 조금 강한 것 같아 연하게 표현해도 좋을 것 같다
  • 글쓰기 버튼을 1. “글 작성" 텍스트 사용 2. 연필모양 아이콘 3. 플로팅 버튼 사용

[마이페이지]

  • 마이페이지도 볼드체를 사용해 제목과 내용을 명확하게 구분해 주는게 좋을 것 같다
  • 항목들이 가로로만 배치되어 단조로운 느낌을 주는데 다른 배치를 사용해 보는 것도 좋을 것 같다(그리드 말씀하시는 것 같음)
  • 업적 아이콘은 스플래시의 3D 아이콘처럼 볼륨이 있는 것을 사용하는 것이 컨셉에 맞는 것 같다
  • 3D를 사용하지 않더라도 라인이 작으면 시각적으로 복잡해 보여서 면을 활용하거나 컬러를 사용해 보는 것이 좋을 것 같다

[다이얼로그]

  • 다이얼로그 아이콘 라인을 톤앤 매너를 위해 굵은 것보다 라인이 없는 아이콘이 보기 더 좋을 것 같다
  • 업적 개수를 표시하는 부분이 어색한데 정렬을 이용해 맞추어 주면 좋을 것 같다

[홈]

  • 추천 산 옆의 설명 텍스트의 색상은 일반적으로 disable 색상으로 사용되니 진한 색생을 사용하는 것이 좋을 것 같다
  • 라디오 플로팅 버튼은 배경 그림자를 주거나 색상을 어두운 색으로 사용하는 것이 보기 좋다
  • 라디오 일시정지 버튼의 검정색이 어울리지 않는 것 같아 그레이나 그린 아이보리를 사용하는 것이 좋을 것 같다
  • 마찬가지로 게시물의 타이틀을 볼트로 처리하고 게시일은 없애는게 좋다
  • 라디오 재생 버튼처럼 큰 버튼은 면으로 채워진 아이콘을 사용하는 것이 보기 좋을 것 같다
  • 바텀 네비게이션 버튼은 단순한 면 아이콘을 사용하고 컬러를 사용하고 싶은 경우 최대 두가지의 웜톤 컬러를 사용한 아이콘을 사용하면 될 것 같다
  • 네비게이션 아이콘이 화려하면 컨텐츠에 가야하는 시선이 분산되어 좋지 않음

[디테일]

  • 타이틀 박스가 애매한 원형인데, 완전 원형으로 사용하거나 약간의R을 사용해 박스형태를 사용하는 것이 좋다
  • 난이도 색상은 오렌지의 가까운 색상을 사용해 톤을 맞추어 주었으면 좋겠다
  • 더 보기 버튼은 설명과 구분될 수 있도록 폰트와 색상을 바꾸거나 화살표 아이콘을 사용하는 것이 좋다
  • 북마크는 테두리가 없는 면 이미지를 사용하는 것이 좋을 것 같다
  • 드롭다운 박스는 i 아이콘 또는 시계 아이콘을 사용해 클릭할 수 있음을 나타내면 좋고
  • 드롭다운을 사용하지 않고 상 하행은 위계를 낮추어 아래에 두 줄로 사용해도 좋을 것 같다
  • 뒤로가기 버튼은 하위조건을 의미하는 것임으로 꺽쇠가 없는 화살표를 사용하고 크기를 더 키우는게 좋다

[챗봇]

  • MBTI 선택은 아직 두 캐릭터 밖에 없기 때문에 토글로 선택하는게 보기 좋을 것 같다
  • 캐릭터에 성격을 묘사하는 이모티콘이나 아이콘이 있으면 재미적인 요소도 추가할 수 있을 것 같다
  • 사용자와 챗봇의 말풍선을 명확하게 구분해 주어야 한다
  • 검색 버튼은 카카오톡 처럼 없애거나 보내기를 의미하는 아이콘을 사용하면 좋다

 

그리하여 이 부분을 수정하면서 회의를 거치다보니 기능을 구현할 시간이 줄어들게 되더라.

 

 

내일은 반드시 기능을 하나라도 구현하고 말리라.